मैप में मार्कर जोड़ना

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

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

बेहतर मार्कर लाइब्रेरी लोड करना

मैप में बेहतर मार्कर जोड़ने के लिए, आपके मैप कोड को marker लाइब्रेरी को लोड करना होगा. यह लाइब्रेरी, AdvancedMarkerElement और PinElement क्लास उपलब्ध कराती है. यह इस बात पर लागू होता है कि आपका ऐप्लिकेशन, मार्कर को प्रोग्राम के हिसाब से लोड करता है या एचटीएमएल का इस्तेमाल करके. ऐसा करने के लिए, आपके ऐप्लिकेशन को पहले Maps JavaScript API लोड करना होगा.

लाइब्रेरी लोड करने का तरीका इस बात पर निर्भर करता है कि आपका वेब पेज, Maps JavaScript API को कैसे लोड करता है.

  • अगर आपका वेब पेज डाइनैमिक स्क्रिप्ट लोडिंग का इस्तेमाल करता है, तो मार्कर लाइब्रेरी जोड़ें और रनटाइम पर AdvancedMarkerElement (और ज़रूरत पड़ने पर PinElement) इंपोर्ट करें, जैसा कि यहां दिखाया गया है.

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  • अगर आपका वेब पेज, स्क्रिप्ट को सीधे लोड करने वाले टैग का इस्तेमाल करता है, तो लोड करने वाली स्क्रिप्ट में libraries=marker जोड़ें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है. ऐसा करने पर, AdvancedMarkerElement और PinElement, दोनों को इंपोर्ट कर दिया जाएगा.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

एचटीएमएल का इस्तेमाल करके मार्कर जोड़ना (बीटा वर्शन)

एचटीएमएल का इस्तेमाल करके बेहतर मार्कर जोड़ने के लिए, gmp-map एलिमेंट में gmp-advanced-marker चाइल्ड एलिमेंट जोड़ें. नीचे दिए गए स्निपेट में, किसी वेब पेज में मार्कर जोड़ने का तरीका बताया गया है:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखना

इस उदाहरण में, एचटीएमएल का इस्तेमाल करके मार्कर वाला मैप बनाने का तरीका बताया गया है.

TypeScript

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;
index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;
index.js

सीएसएस

/* 
 * 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;
}

gmp-map {
  height: 400px;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script 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&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

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

प्रोग्राम के हिसाब से मार्कर जोड़ना

प्रोग्राम के हिसाब से किसी मैप में बेहतर मार्कर जोड़ने के लिए, नया AdvancedMarkerElement बनाएं. इसके लिए, LatLng या LatLngAltitude और बेसमैप का रेफ़रंस दें, जैसा कि इस उदाहरण में दिखाया गया है:

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

मैप से मार्कर हटाने के लिए, markerView.map या position को null पर सेट करें.

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखना

इस उदाहरण में, मैप में मार्कर जोड़ने का तरीका बताया गया है.

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new Map(document.getElementById("map"), {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.4239163, lng: -122.0947209 },
  });
}

initMap();
index.js

सीएसएस

/* 
 * 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>Default Advanced Marker</title>

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

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

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

अगले चरण