सूचना: Google Maps Platform में, बेसमैप की नई स्टाइल जल्द ही उपलब्ध होगी. मैप की स्टाइल में किए गए इस अपडेट में, नया डिफ़ॉल्ट कलर पैलेट, आधुनिक पिन, और मैप के अनुभव और इस्तेमाल में सुधार शामिल हैं. मार्च 2025 में, सभी मैप स्टाइल अपने-आप अपडेट हो जाएंगे. उपलब्धता और पहले से ऑप्ट-इन करने के तरीके के बारे में ज़्यादा जानने के लिए, Google Maps Platform के लिए नया मैप स्टाइल लेख पढ़ें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

मार्कर (लेगसी)

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

google.maps.Marker को 21 फ़रवरी, 2024 (v3.56) से इस्तेमाल नहीं किया जा सकेगा. हमारा सुझाव है कि आप google.maps.marker.AdvancedMarkerElement की नई क्लास पर स्विच करें. बेहतर मार्कर, लेगसी google.maps.Marker क्लास की तुलना में काफ़ी बेहतर होते हैं. google.maps.marker.AdvancedMarkerElement के साथ Maps JavaScript API का कम से कम वर्शन 3.53.2 है. फ़िलहाल, google.maps.Marker को बंद करने का कोई शेड्यूल नहीं है.

ज़्यादा जानें

परिचय

मार्कर, मैप पर किसी जगह की पहचान करता है. डिफ़ॉल्ट रूप से, मार्कर में एक स्टैंडर्ड इमेज का इस्तेमाल होता है. मार्कर में कस्टम इमेज दिखाई जा सकती हैं. ऐसे में, उन्हें आम तौर पर "आइकॉन" कहा जाता है. मार्कर और आइकॉन, टाइप के ऑब्जेक्ट होते हैं Marker. मार्कर के कन्स्ट्रक्टर में या मार्कर पर setIcon() को कॉल करके, कस्टम आइकॉन सेट किया जा सकता है. मार्कर इमेज को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानें.

मोटे तौर पर, मार्कर एक तरह का ओवरले होता है. अन्य तरह के ओवरले के बारे में जानकारी पाने के लिए, मैप पर ड्रॉ करना लेख पढ़ें.

मार्कर को इंटरैक्टिव बनाने के लिए डिज़ाइन किया गया है. उदाहरण के लिए, डिफ़ॉल्ट रूप से उन्हें 'click' इवेंट मिलते हैं. इसलिए, अपनी पसंद के मुताबिक जानकारी दिखाने वाली जानकारी वाली विंडो खोलने के लिए, इवेंट लिसनर जोड़ा जा सकता है. मार्कर की draggable प्रॉपर्टी को true पर सेट करके, उपयोगकर्ताओं को मैप पर मार्कर को मूव करने की अनुमति दी जा सकती है. खींचे और छोड़े जा सकने वाले मार्कर के बारे में ज़्यादा जानकारी के लिए, यहां देखें.

कोई मार्कर जोड़ें

google.maps.Marker के कंस्ट्रक्टर में एक Marker options ऑब्जेक्ट लिटरल होता है. इससे मार्कर की शुरुआती प्रॉपर्टी के बारे में पता चलता है.

मार्कर बनाते समय, ये फ़ील्ड खास तौर पर अहम होते हैं और आम तौर पर सेट किए जाते हैं:

position (ज़रूरी है) एक LatLng तय करता है, जो मार्कर की शुरुआती जगह की पहचान करता है. LatLng को वापस पाने का एक तरीका, जियोकोडिंग सेवा का इस्तेमाल करना है.
map (ज़रूरी नहीं) उस Map के बारे में बताता है जिस पर मार्कर को रखा जाना है. अगर मार्कर बनाते समय, मैप की जानकारी नहीं दी जाती है, तो मार्कर बन जाता है, लेकिन वह मैप से अटैच नहीं होता या मैप पर नहीं दिखता. मार्कर को बाद में भी जोड़ा जा सकता है. इसके लिए, मार्कर के setMap() तरीके को कॉल करें.

यहां दिए गए उदाहरण में, ऑस्ट्रेलिया के मध्य में मौजूद ऊलुरू में, मैप पर एक साधारण मार्कर जोड़ा गया है:

TypeScript

function initMap(): void {
  const myLatLng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatLng,
    }
  );

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

ऊपर दिए गए उदाहरण में, मार्कर के विकल्पों में map प्रॉपर्टी का इस्तेमाल करके, मार्कर को मैप पर बनाया गया है. इसके अलावा, मार्कर को मैप पर सीधे तौर पर जोड़ा जा सकता है. इसके लिए, मार्कर के setMap() तरीके का इस्तेमाल करें, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

मार्कर का title टूलटिप के तौर पर दिखेगा.

अगर आपको मार्कर के कंस्ट्रक्टर में कोई Marker options पास नहीं करना है, तो कंस्ट्रक्टर के आखिरी आर्ग्युमेंट में कोई खाली ऑब्जेक्ट {} पास करें.

उदाहरण देखें

मार्कर हटाना

मैप से मार्कर हटाने के लिए, setMap() तरीके को कॉल करें और null को आर्ग्युमेंट के तौर पर पास करें.

marker.setMap(null);

ध्यान दें कि ऊपर बताए गए तरीके से मार्कर नहीं मिटता. इससे मैप से मार्कर हट जाता है. अगर आपको मार्कर मिटाना है, तो आपको उसे मैप से हटाना होगा. इसके बाद, मार्कर को खुद ही null पर सेट करें.

अगर आपको मार्कर का कोई सेट मैनेज करना है, तो आपको मार्कर को सेव करने के लिए एक कलेक्शन बनाना चाहिए. इस कलेक्शन का इस्तेमाल करके, मार्कर हटाने के लिए, कलेक्शन में मौजूद हर मार्कर पर setMap() को बारी-बारी से कॉल किया जा सकता है. मार्कर को मैप से हटाकर और फिर ऐरे के length को 0 पर सेट करके, मार्कर मिटाए जा सकते हैं. इससे मार्कर के सभी रेफ़रंस हट जाते हैं.

उदाहरण देखें

मार्कर इमेज को पसंद के मुताबिक बनाना

मार्कर के विज़ुअल को अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए, Google Maps के डिफ़ॉल्ट पुशपिन आइकॉन के बजाय, कोई इमेज फ़ाइल या वेक्टर-आधारित आइकॉन दिखाया जा सकता है. मार्कर लेबल के साथ टेक्स्ट जोड़ा जा सकता है. साथ ही, क्लिक किए जा सकने वाले इलाकों को तय करने के लिए, जटिल आइकॉन का इस्तेमाल किया जा सकता है. साथ ही, मार्कर का स्टैक क्रम भी सेट किया जा सकता है.

इमेज आइकॉन वाले मार्कर

सबसे बुनियादी मामले में, किसी आइकॉन में, Google Maps के डिफ़ॉल्ट पुशपिन आइकॉन के बजाय, इस्तेमाल करने के लिए कोई इमेज तय की जा सकती है. इस तरह का आइकॉन तय करने के लिए, मार्कर की icon प्रॉपर्टी को किसी इमेज के यूआरएल पर सेट करें. Maps JavaScript API, आइकॉन का साइज़ अपने-आप तय कर देगा.

TypeScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
    }
  );

  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const image =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  const beachMarker = new google.maps.Marker({
    position: { lat: -33.89, lng: 151.274 },
    map,
    icon: image,
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

वेक्टर-आधारित आइकॉन वाले मार्कर

मार्कर के विज़ुअल दिखाने के लिए, कस्टम एसवीजी वेक्टर पाथ का इस्तेमाल किया जा सकता है. ऐसा करने के लिए, मार्कर की icon प्रॉपर्टी में, अपनी पसंद के पाथ के साथ Symbol ऑब्जेक्ट लिटरल पास करें. SVG पाथ नोटेशन का इस्तेमाल करके, अपनी पसंद का पाथ तय किया जा सकता है. इसके अलावा, google.maps.SymbolPath में पहले से तय किए गए पाथ में से किसी एक का इस्तेमाल किया जा सकता है. ज़ूम लेवल बदलने पर, मार्कर सही तरीके से रेंडर हो, इसके लिए anchor प्रॉपर्टी ज़रूरी है. मार्कर (और पॉलीलाइन) के लिए, वेक्टर-आधारित आइकॉन बनाने के लिए सिंबल का इस्तेमाल करने के बारे में ज़्यादा जानें.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

मार्कर लेबल

मार्कर लेबल, मार्कर के अंदर दिखने वाला अक्षर या संख्या होती है. इस सेक्शन में मौजूद मार्कर इमेज में, मार्कर लेबल दिख रहा है. इस लेबल पर 'B' अक्षर है. मार्कर लेबल को स्ट्रिंग या MarkerLabel ऑब्जेक्ट के तौर पर सेट किया जा सकता है. इस ऑब्जेक्ट में स्ट्रिंग और अन्य लेबल प्रॉपर्टी शामिल होती हैं.

मार्कर बनाते समय, MarkerOptions ऑब्जेक्ट में label प्रॉपर्टी की जानकारी दी जा सकती है. इसके अलावा, किसी मौजूदा मार्कर पर लेबल सेट करने के लिए, मार्कर ऑब्जेक्ट पर setLabel() को कॉल किया जा सकता है.

नीचे दिए गए उदाहरण में, उपयोगकर्ता के नक्शे पर क्लिक करने पर, लेबल किए गए मार्कर दिखते हैं:

TypeScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap(): void {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: bangalore,
    }
  );

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location: google.maps.LatLngLiteral, map: google.maps.Map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let labelIndex = 0;

function initMap() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: bangalore,
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, "click", (event) => {
    addMarker(event.latLng, map);
  });
  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map,
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

जटिल आइकॉन

क्लिक किए जा सकने वाले इलाकों को दिखाने के लिए, जटिल आकार तय किए जा सकते हैं. साथ ही, यह भी तय किया जा सकता है कि अन्य ओवरले के मुकाबले आइकॉन कैसे दिखें (उनका "स्टैक ऑर्डर"). इस तरह से तय किए गए आइकॉन को अपनी icon प्रॉपर्टी को टाइप के ऑब्जेक्ट पर सेट करना चाहिए Icon.

Icon ऑब्जेक्ट, इमेज की जानकारी देते हैं. ये आइकॉन के size, आइकॉन के origin (उदाहरण के लिए, अगर आपकी इमेज स्प्राइट में मौजूद किसी बड़ी इमेज का हिस्सा है), और anchor के बारे में भी बताते हैं. anchor से पता चलता है कि आइकॉन का हॉटस्पॉट कहां होना चाहिए. यह ऑरिजिन के आधार पर तय होता है.

अगर कस्टम मार्कर के साथ लेबल का इस्तेमाल किया जा रहा है, तो Icon ऑब्जेक्ट में labelOrigin प्रॉपर्टी की मदद से लेबल को पोज़िशन किया जा सकता है.

TypeScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 10,
      center: { lat: -33.9, lng: 151.2 },
    }
  );

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches: [string, number, number, number][] = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map: google.maps.Map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: { lat: -33.9, lng: 151.2 },
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1],
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32),
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly",
  };

  for (let i = 0; i < beaches.length; i++) {
    const beach = beaches[i];

    new google.maps.Marker({
      position: { lat: beach[1], lng: beach[2] },
      map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3],
    });
  }
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

`MarkerImage` ऑब्जेक्ट को `Icon` टाइप में बदलना

Maps JavaScript API के 3.10 वर्शन तक, जटिल आइकॉन को MarkerImage ऑब्जेक्ट के तौर पर तय किया गया था. Icon ऑब्जेक्ट लिटरल को 3.10 वर्शन में जोड़ा गया था. साथ ही, इसे 3.11 वर्शन से MarkerImage की जगह इस्तेमाल किया जा रहा है. Icon ऑब्जेक्ट लिटरल में वही पैरामीटर इस्तेमाल किए जा सकते हैं जो MarkerImage में इस्तेमाल किए जा सकते हैं. इससे, किसी MarkerImage को Icon में आसानी से बदला जा सकता है. इसके लिए, आपको कॉन्स्ट्रक्टर को हटाना होगा, पिछले पैरामीटर को {} में रैप करना होगा, और हर पैरामीटर के नाम जोड़ने होंगे. उदाहरण के लिए:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

के बराबर

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

मार्कर ऑप्टिमाइज़ करना

ऑप्टिमाइज़ेशन, कई मार्कर को एक स्टैटिक एलिमेंट के तौर पर रेंडर करके परफ़ॉर्मेंस को बेहतर बनाता है. यह उन मामलों में मददगार होता है जहां बड़ी संख्या में मार्कर की ज़रूरत होती है. डिफ़ॉल्ट रूप से, Maps JavaScript API यह तय करेगा कि किसी मार्कर को ऑप्टिमाइज़ किया जाएगा या नहीं. अगर मार्कर की संख्या ज़्यादा है, तो Maps JavaScript API ऑप्टिमाइज़ेशन के साथ मार्कर को रेंडर करने की कोशिश करेगा. सभी मार्कर को ऑप्टिमाइज़ नहीं किया जा सकता. कुछ मामलों में, Maps JavaScript API को ऑप्टिमाइज़ेशन के बिना मार्कर को रेंडर करना पड़ सकता है. ऐनिमेशन वाले GIF या PNG के लिए ऑप्टिमाइज़ की गई रेंडरिंग बंद करें. ऐसा तब भी करें, जब हर मार्कर को अलग-अलग DOM एलिमेंट के तौर पर रेंडर करना हो. यहां दिए गए उदाहरण में, ऑप्टिमाइज़ किया गया मार्कर बनाने का तरीका बताया गया है:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!",
    optimized: true 
});

मार्कर को ऐक्सेस करने की अनुमति देना

क्लिक लिसनर इवेंट जोड़कर और optimized को false पर सेट करके, मार्कर को ऐक्सेस किया जा सकता है. क्लिक करने पर सुनाई देने वाली सूचना की वजह से, मार्कर में बटन सेमेंटेक्स होते हैं. इन्हें कीबोर्ड नेविगेशन, स्क्रीन रीडर वगैरह का इस्तेमाल करके ऐक्सेस किया जा सकता है. मार्कर के लिए सुलभ टेक्स्ट दिखाने के लिए, title विकल्प का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, Tab दबाने पर पहले मार्कर पर फ़ोकस जाता है. इसके बाद, मार्कर के बीच स्विच करने के लिए ऐरो बटन का इस्तेमाल किया जा सकता है. मैप के बाकी कंट्रोल पर जाने के लिए, tab को फिर से दबाएं. अगर किसी मार्कर के साथ जानकारी वाली विंडो है, तो मार्कर पर क्लिक करके या मार्कर चुनने के बाद Enter बटन या Space बार दबाकर, उसे खोला जा सकता है. जानकारी वाली विंडो बंद होने पर, फ़ोकस उस मार्कर पर वापस आ जाएगा जिससे वह जुड़ी है.

TypeScript

// The following example creates five accessible and
// focusable markers.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: 34.84555, lng: -111.8035 },
    }
  );

  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops: [google.maps.LatLngLiteral, string][] = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];

  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates five accessible and
// focusable markers.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 34.84555, lng: -111.8035 },
  });
  // Set LatLng and title text for the markers. The first marker (Boynton Pass)
  // receives the initial focus when tab is pressed. Use arrow keys to
  // move between markers; press tab again to cycle through the map controls.
  const tourStops = [
    [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"],
    [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"],
    [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"],
    [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"],
    [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"],
  ];
  // Create an info window to share between markers.
  const infoWindow = new google.maps.InfoWindow();

  // Create the markers.
  tourStops.forEach(([position, title], i) => {
    const marker = new google.maps.Marker({
      position,
      map,
      title: `${i + 1}. ${title}`,
      label: `${i + 1}`,
      optimized: false,
    });

    // Add a click listener for each marker, and set up the info window.
    marker.addListener("click", () => {
      infoWindow.close();
      infoWindow.setContent(marker.getTitle());
      infoWindow.open(marker.getMap(), marker);
    });
  });
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

मार्कर को ऐनिमेट करना

मार्कर को ऐनिमेट किया जा सकता है, ताकि वे अलग-अलग परिस्थितियों में डाइनैमिक तरीके से मूवमेंट दिखा सकें. मार्कर के ऐनिमेशन के तरीके के बारे में बताने के लिए, google.maps.Animation टाइप की मार्कर की animation प्रॉपर्टी का इस्तेमाल करें. ये Animation वैल्यू इस्तेमाल की जा सकती हैं:

DROP से पता चलता है कि मैप पर पहली बार मार्कर डालते समय, उसे मैप के सबसे ऊपर से अपनी आखिरी जगह पर छोड़ा जाना चाहिए. मार्कर के रुकने के बाद ऐनिमेशन बंद हो जाएगा और animation, null पर वापस आ जाएगा. आम तौर पर, इस तरह के ऐनिमेशन के बारे में जानकारी, Marker बनाते समय दी जाती है.
BOUNCE से पता चलता है कि मार्कर को अपनी जगह पर बाउंस करना चाहिए. कोई बाउंसिंग मार्कर तब तक बाउंस करता रहेगा, जब तक कि उसकी animation प्रॉपर्टी को साफ़ तौर पर null पर सेट नहीं किया जाता.

किसी मौजूदा मार्कर पर ऐनिमेशन शुरू करने के लिए, Marker ऑब्जेक्ट पर setAnimation() को कॉल करें.

TypeScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

let marker: google.maps.Marker;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 59.325, lng: 18.07 },
    }
  );

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 59.325, lng: 18.07 },
  });

  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 59.327, lng: 18.067 },
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

window.initMap = initMap;index.js

उदाहरण देखें

सैंपल आज़माएं

JSFiddle.net Google Cloud Shell

अगर आपके पास कई मार्कर हैं, तो हो सकता है कि आप उन्हें मैप पर एक साथ न डालना चाहें. अपने मार्कर के ऐनिमेशन के बीच स्पेस देने के लिए, setTimeout() का इस्तेमाल किया जा सकता है. इसके लिए, नीचे दिए गए पैटर्न का इस्तेमाल करें:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

उदाहरण देखें

मार्कर को खींचकर छोड़ने लायक बनाना

उपयोगकर्ताओं को मैप पर किसी मार्कर को खींचकर किसी दूसरी जगह पर ले जाने की अनुमति देने के लिए, मार्कर के विकल्पों में draggable को true पर सेट करें.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

मार्कर को पसंद के मुताबिक बनाने के अन्य विकल्प

पूरी तरह से पसंद के मुताबिक मार्कर बनाने के लिए, पसंद के मुताबिक बनाए गए पॉप-अप का उदाहरण देखें.

मार्कर क्लास के अन्य एक्सटेंशन, मार्कर क्लस्टरिंग और मैनेजमेंट, और ओवरले को पसंद के मुताबिक बनाने के लिए, ओपन सोर्स लाइब्रेरी देखें.

मार्कर (लेगसी)

परिचय

कोई मार्कर जोड़ें

TypeScript

JavaScript

सैंपल आज़माएं

मार्कर हटाना

मार्कर इमेज को पसंद के मुताबिक बनाना

इमेज आइकॉन वाले मार्कर

TypeScript

JavaScript

सैंपल आज़माएं

वेक्टर-आधारित आइकॉन वाले मार्कर

TypeScript

JavaScript

सैंपल आज़माएं

मार्कर लेबल

TypeScript

JavaScript

सैंपल आज़माएं

जटिल आइकॉन

TypeScript

JavaScript

सैंपल आज़माएं

MarkerImage ऑब्जेक्ट को Icon टाइप में बदलना

मार्कर ऑप्टिमाइज़ करना

मार्कर को ऐक्सेस करने की अनुमति देना

TypeScript

JavaScript

सैंपल आज़माएं

मार्कर को ऐनिमेट करना

TypeScript

JavaScript

सैंपल आज़माएं

मार्कर को खींचकर छोड़ने लायक बनाना

मार्कर को पसंद के मुताबिक बनाने के अन्य विकल्प

`MarkerImage` ऑब्जेक्ट को `Icon` टाइप में बदलना