गूगल मानचित्र ओवरले

गूगल मानचित्र - ओवरले

ओवरले मानचित्र पर बांधे हुए अक्षांश/देशांतर निर्देशांक के वस्तु हैं。

गूगल मानचित्र के अनेक प्रकार के ओवरले हैं:

• चिह्न (Marker) - मानचित्र पर एक अकेला स्थान। चिह्न अधिकतर आयकॉन चित्र भी दिखाता है
• विन्यास रेखा (Polyline) - मानचित्र पर एक श्रृंखला की रेखाएँ
• बहुभुज (Polygon) - मानचित्र पर एक श्रृंखला की रेखाएँ हैं जो 'बंद' रूप ले लेती है
• वृत्त और चतुर्भुज (Circle और Rectangle)
• सूचना खिड़की (Info Windows) - मानचित्र के शीर्ष पर उभरते हुए बालूम में सामग्री दिखाने के लिए
• स्वयंचलित ओवरले (Custom overlays)

गूगल मानचित्र - चिह्न जोड़ना

Marker निर्माता विधि चिह्न बना सकती है। ध्यान दें कि चिह्न दिखाने के लिए position गुण को सेट करना आवश्यक है。

कृपया setMap() विधि का उपयोग करके चिह्न को मानचित्र में जोड़ें:

उदाहरण

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

गूगल मानचित्र - चिह्न एनीमेशन

नीचे दिए गए उदाहरण में animation गुण के द्वारा चिह्न के लिए एनीमेशन सेट करने के तरीके दिया गया है:

उदाहरण

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

गूगल मानचित्र - आयकॉन से चिह्न बदलना

नीचे दिए गए उदाहरण में विन्यास के लिए इस्तेमाल करने वाले चित्र (आयकॉन) को निर्दिष्ट किया गया है:

उदाहरण

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

गूगल मानचित्र - विन्यास रेखा

विन्यास रेखा एक वर्गीकृत श्रृंखला के निर्देशांकों से बनाई गई रेखा है。

विन्यास रेखा निम्नलिखित गुणों को समर्थित करती है:

• path विन्यास रेखा के कुछ अक्षांश/देशांतर निर्देशांक
• strokeColor - रेखा का हेक्साडेसिमल रंग (फॉर्मेट: "#FFFFFF")
• strokeOpacity - रेखा की अस्पष्टता निर्धारित करें (0.0 से 1.0 तक के बीच का मान)
• strokeWeight - रेखा के व्यास को निर्धारित करें (पिक्सल में)
• editable - इस रेखा को उपयोगकर्ता द्वारा संपादित किया जा सकता है (true/false)

उदाहरण

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

गूगल मानचित्र - बहुभुज

बहुभुज लेन्डाइन के समान है, यह एक श्रृंखला के अनुक्रमित निर्देशांकों से बना है। हालांकि, बहुभुज को बंद क्षेत्र के अंतर्गत क्षेत्र को परिभाषित करने के लिए डिजाइन किया गया है。

बहुभुज रेखाओं से बना है और यह "बंद" है (सभी रेखाएं जुड़ी हुई हैं).

बहुभुज को निम्नलिखित गुणों को समर्थित करता है:

• path - रेखा के कई अक्षांश/देशांतर कोण (पहला और अंतिम कोण समान होते हैं)
• strokeColor - रेखा का हेक्साडेसिमल रंग (फॉर्मेट: "#FFFFFF")
• strokeOpacity - रेखा की अस्पष्टता निर्धारित करें (0.0 से 1.0 तक के बीच का मान)
• strokeWeight - रेखा के व्यास को निर्धारित करें (पिक्सल में)
• fillColor - बंद क्षेत्र के अंतर्गत क्षेत्र का हेक्साडेसिमल रंग (फॉर्मेट: "#FFFFFF")
• fillOpacity - फ़िल्ल रंग की अस्पष्टता निर्धारित करें (0.0 से 1.0 तक के बीच का मान)
• editable - इस रेखा को उपयोगकर्ता द्वारा संपादित किया जा सकता है (true/false)

उदाहरण

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

गूगल मानचित्र - वृत्त

वृत्त निम्नलिखित गुणों को समर्थित करता है:

• center - गूगल मानचित्र LatLng द्वारा वृत्त के केंद्र को निर्धारित करें
• radius - वृत्त का दायरा मीटर में निर्धारित करें
• strokeColor - वृत्त के चारों ओर की रेखा का हेक्साडेसिमल रंग (फॉर्मेट: "#FFFFFF")
• strokeOpacity - रेखा के रंग की अस्पष्टता निर्धारित करें (0.0 से 1.0 तक के बीच का मान)
• strokeWeight - रेखा के व्यास को निर्धारित करें (पिक्सल में)
• fillColor - वृत्त के अंतर्गत क्षेत्र के हेक्साडेसिमल रंग (फॉर्मेट: "#FFFFFF")
• fillOpacity - फ़िल्ल रंग की अस्पष्टता निर्धारित करें (0.0 से 1.0 तक के बीच का मान)
• editable - उपयोगकर्ता को वृत्त को संपादित करने की अनुमति दें (true/false)

उदाहरण

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

गूगल मानचित्र - इन्फोविंडो

मार्कर के लिए पाठ वाला इन्फोविंडो दिखाएं:

उदाहरण

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
content:"Hello World!"