सुरक्षा नोटिस: हमें सुरक्षा से जुड़ी एक समस्या का पता चला है. यह समस्या तीसरे पक्ष की कुछ लाइब्रेरी (इसमें polyfill.io शामिल है) का इस्तेमाल करने वाली वेबसाइटों पर असर डाल सकती है. इस समस्या की वजह से, वेबसाइट पर आने वाले लोगों को कभी-कभी अपनी वेबसाइट के मालिक की जानकारी या अनुमति के बिना ही, दूसरी वेबसाइट पर रीडायरेक्ट कर दिया जाता है. हमारे कई JavaScript सैंपल में, पहले से polyfill.io स्क्रिप्ट का एलान शामिल था. हमने इसे अपने सैंपल से हटा दिया है. अगर आपने हमारे JavaScript सैंपल का इस्तेमाल किया है और इनमें यह एलान शामिल है, तो हमारा सुझाव है कि आप इस एलान को हटा दें.

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

एचटीएमएल और सीएसएस की मदद से मार्कर बनाना

बेहतर मार्कर की मदद से आप इन कामों के लिए कस्टम एचटीएमएल और सीएसएस का इस्तेमाल कर सकते हैं ज़्यादा विज़ुअल इफ़ेक्ट वाले मार्कर बनाएं, जिनसे इंटरैक्टिविटी और ऐनिमेशन. सभी AdvancedMarkerElement इंस्टेंस, डीओएम में एचटीएमएल के तौर पर जोड़े जाते हैं एलिमेंट, जिन्हें element प्रॉपर्टी से ऐक्सेस किया जा सकता है और की तरह ही काम करता है. क्योंकि AdvancedMarkerElement एक डीओएम है तत्व के लिए, आप डिफ़ॉल्ट मार्कर पर सीधे CSS शैलियां लागू कर सकते हैं और HTML और CSS का उपयोग करके पूरी तरह से कस्टम मार्कर बनाना चाहते हैं.

सामान्य एचटीएमएल मार्कर

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

सोर्स देखें

नीचे दिए गए उदाहरण में, एक नया DIV एलिमेंट बनाते हुए दिखाया गया है. इसके तहत, सीएसएस क्लास को असाइन किया गया है और टेक्स्ट सामग्री को DIV में ले जाएं, फिर DIV को AdvancedMarkerElement.content के मान के रूप में पास करें:

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.42, lng: -122.1 },
    zoom: 14,
    mapId: '4504f8b37365c3d0',
  });

  const priceTag = document.createElement('div');
  priceTag.className = 'price-tag';
  priceTag.textContent = '$2.5M';

  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.42, lng: -122.1 },
    content: priceTag,
  });
}
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.42, lng: -122.1 },
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });
  const priceTag = document.createElement("div");

  priceTag.className = "price-tag";
  priceTag.textContent = "$2.5M";

  const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.42, lng: -122.1 },
    content: priceTag,
  });
}

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

/* HTML marker styles */
.price-tag {
  background-color: #4285F4;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 15px;
  position: relative;
}

.price-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #4285F4;
}
style.css