मैप पर एक जगह दिखाने के लिए, मार्कर का इस्तेमाल करें. इस पेज पर, प्रोग्राम के हिसाब से और एचटीएमएल का इस्तेमाल करके, मैप में मार्कर जोड़ने का तरीका बताया गया है.
बेहतर मार्कर लाइब्रेरी लोड करना
मैप पर बेहतर मार्कर जोड़ने के लिए, आपके मैप कोड को 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>
सोर्स कोड का पूरा उदाहरण देखें
इस उदाहरण में एचटीएमएल का इस्तेमाल करके, मार्कर की मदद से मैप बनाने का तरीका दिखाया गया है.
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;
JavaScript
// This example adds a map with markers, using web components. async function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
सीएसएस
/* * 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; }
एचटीएमएल
<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>
सैंपल आज़माएं
प्रोग्राम के हिसाब से मार्कर जोड़ना
प्रोग्राम के हिसाब से किसी मैप में बेहतर मार्कर जोड़ने के लिए, एक नया 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();
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();
सीएसएस
/* * 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; }
एचटीएमएल
<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>