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

Google मैप को पसंद के मुताबिक बनाना: कस्टम मार्कर

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

खास जानकारी

इस ट्यूटोरियल में, Google मैप मार्कर का आइकॉन बदलने का तरीका बताया गया है. इस ट्यूटोरियल का इस्तेमाल करते समय, मार्कर बनाने की बुनियादी बातों को ज़रूर जानें.

नीचे दिया गया मैप ऐसे मैप का उदाहरण है जिसमें कस्टमाइज़ किए गए मार्कर का इस्तेमाल किया जाता है.

नीचे दिए गए सेक्शन में वे सभी कोड दिए गए हैं जिनकी ज़रूरत इस ट्यूटोरियल में मैप बनाने के लिए होती है.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: new google.maps.LatLng(-33.91722, 151.23064),
    zoom: 16,
  });

  const iconBase =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/";

  const icons: Record<string, { icon: string }> = {
    parking: {
      icon: iconBase + "parking_lot_maps.png",
    },
    library: {
      icon: iconBase + "library_maps.png",
    },
    info: {
      icon: iconBase + "info-i_maps.png",
    },
  };

  const features = [
    {
      position: new google.maps.LatLng(-33.91721, 151.2263),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91539, 151.2282),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91747, 151.22912),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.9191, 151.22907),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91725, 151.23011),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91872, 151.23089),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91784, 151.23094),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91682, 151.23149),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.9179, 151.23463),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91666, 151.23468),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.916988, 151.23364),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
      type: "library",
    },
  ];

  // Create markers.
  for (let i = 0; i < features.length; i++) {
    const marker = new google.maps.Marker({
      position: features[i].position,
      icon: icons[features[i].type].icon,
      map: map,
    });
  }
}

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-33.91722, 151.23064),
    zoom: 16,
  });

  const iconBase =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/";
  const icons = {
    parking: {
      icon: iconBase + "parking_lot_maps.png",
    },
    library: {
      icon: iconBase + "library_maps.png",
    },
    info: {
      icon: iconBase + "info-i_maps.png",
    },
  };
  const features = [
    {
      position: new google.maps.LatLng(-33.91721, 151.2263),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91539, 151.2282),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91747, 151.22912),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.9191, 151.22907),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91725, 151.23011),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91872, 151.23089),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91784, 151.23094),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91682, 151.23149),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.9179, 151.23463),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91666, 151.23468),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.916988, 151.23364),
      type: "info",
    },
    {
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
      type: "parking",
    },
    {
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
      type: "library",
    },
  ];

  // Create markers.
  for (let i = 0; i < features.length; i++) {
    const marker = new google.maps.Marker({
      position: features[i].position,
      icon: icons[features[i].type].icon,
      map: map,
    });
  }
}

window.initMap = initMap;index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

एचटीएमएल

<html>
  <head>
    <title>Custom Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

नमूना आज़माएं

JSFiddle.net Codeसैंडबॉक्स.io Google क्लाउड शेल

मैप मार्कर को कस्टमाइज़ करना

नीचे दी गई इमेज में Google Maps मार्कर है, जिसके डिफ़ॉल्ट आइकॉन के साथ लाल रंग का आइकॉन है.

इस आइकॉन को अपनी पसंद की इमेज में बदलें. नीचे दी गई टेबल में उस कोड के बारे में बताया गया है जो पार्किंग की जगह के लिए आइकॉन का इस्तेमाल करने के लिए, डिफ़ॉल्ट मार्कर को पसंद के मुताबिक बनाता है.

कोड और जानकारी

कोड और जानकारी
`var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: iconBase + 'parking_lot_maps.png' });`	मार्कर का आइकॉन बदलने के लिए, `icon` प्रॉपर्टी को `MarkerOptions` ऑब्जेक्ट में जोड़ता है. `icon` प्रॉपर्टी कोई स्ट्रिंग (मार्कर आइकॉन का यूआरएल) या `Icon` ऑब्जेक्ट हो सकती है. कस्टमाइज़ किया गया मार्कर आइकॉन नीचे देखें.

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'parking_lot_maps.png'
  });

मार्कर का आइकॉन बदलने के लिए, icon प्रॉपर्टी को MarkerOptions ऑब्जेक्ट में जोड़ता है.
icon प्रॉपर्टी कोई स्ट्रिंग (मार्कर आइकॉन का यूआरएल) या Icon ऑब्जेक्ट हो सकती है.
कस्टमाइज़ किया गया मार्कर आइकॉन नीचे देखें.

मार्कर को मैप सुविधाओं के मुताबिक कस्टमाइज़ करना

कैंपस की सुविधाओं की सूची में मौजूद हर लोकप्रिय जगह का एक type एट्रिब्यूट होता है. ध्यान दें कि नीचे दिया गया कोड एक्सट्रैक्ट कैसे parking, library, और info टाइप के बारे में बताता है. आप मैप की सुविधा type के हिसाब से मार्कर आइकॉन को पसंद के मुताबिक बना सकते हैं.

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

ज़्यादा जानकारी

मार्कर पर मौजूद इमेज को उसका 'आइकॉन' कहा जाता है.
मार्कर को 'पिन' के नाम से भी जाना जाता है.