मैप पर किसी एक जगह को दिखाने के लिए, मार्कर का इस्तेमाल करें. इस पेज पर, प्रोग्राम के हिसाब से और कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके, मैप में मार्कर जोड़ने का तरीका बताया गया है.
ऐडवांस मार्कर लाइब्रेरी लोड करना
किसी मैप में ऐडवांस मार्कर जोड़ने के लिए, आपके मैप कोड को 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>
मैप आईडी सेट करना
ऐडवांस मार्कर का इस्तेमाल करने के लिए, मैप आईडी ज़रूरी है. इसके लिए, DEMO_MAP_ID का इस्तेमाल किया जा सकता है.
मैप के विकल्पों में मैप आईडी सेट करें. जैसा कि यहां दिखाया गया है:
const map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: 'DEMO_MAP_ID', });
अगर वेब कॉम्पोनेंट का इस्तेमाल किया जा रहा है, तो gmp-map एलिमेंट पर सीधे तौर पर मैप आईडी सेट किया जा सकता है:
<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>
मैप आईडी के बारे में ज़्यादा जानें.
कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके मार्कर जोड़ना
कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके ऐडवांस मार्कर जोड़ने के लिए, 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 बनाएं और उसे मैप में जोड़ें. इसके लिए, यहां दिया गया उदाहरण देखें:
TypeScript
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; 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 marker = new AdvancedMarkerElement({ position: { lat: 37.4239163, lng: -122.0947209 }, }); mapElement.append(marker); }
JavaScript
const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const marker = new AdvancedMarkerElement({ position: { lat: 37.4239163, lng: -122.0947209 }, }); mapElement.append(marker); }
मैप से मार्कर हटाने के लिए, markerView.remove() को कॉल करें. इसके अलावा, markerView.map या position में से किसी एक को null पर सेट करें.
पूरे उदाहरण का सोर्स कोड देखें
इस उदाहरण में, मैप में मार्कर जोड़ने का तरीका बताया गया है.
TypeScript
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; 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 marker = new AdvancedMarkerElement({ position: { lat: 37.4239163, lng: -122.0947209 }, }); mapElement.append(marker); } initMap();
JavaScript
const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const marker = new AdvancedMarkerElement({ position: { lat: 37.4239163, lng: -122.0947209 }, }); mapElement.append(marker); } initMap();
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-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>
<!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
</body>
</html>