मार्कर को बनाने की बुनियादी सेटिंग

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

बेहतर मार्कर, मार्कर को तय करने के लिए दो क्लास का इस्तेमाल करते हैं: AdvancedMarkerElement क्लास बेसिक पैरामीटर (position, title, और map) देता है. वहीं, PinElement क्लास में अतिरिक्त कस्टमाइज़ेशन के लिए विकल्प होते हैं. नीचे दिया गया स्निपेट, नया PinElement बनाने के लिए कोड दिखाता है. इसके बाद, उसे मार्कर पर लागू करें.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

एचटीएमएल का इस्तेमाल करके बनाए गए मैप में, किसी मार्कर के बेसिक पैरामीटर का एलान, gmp-advanced-marker एचटीएमएल एलिमेंट का इस्तेमाल करके किया जाता है. PinElement क्लास का इस्तेमाल करने वाले किसी भी कस्टमाइज़ेशन को प्रोग्राम के ज़रिए लागू किया जाना चाहिए. ऐसा करने के लिए, आपके कोड को एचटीएमएल पेज से gmp-advanced-marker एलिमेंट हासिल करने होंगे. नीचे दिया गया स्निपेट, gmp-advanced-marker एलिमेंट के कलेक्शन के लिए क्वेरी करने के लिए कोड दिखाता है. इसके बाद, PinElement में तय किए गए कस्टमाइज़ेशन को लागू करने के लिए, नतीजों को दोहराएं.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

यह पेज आपको, मार्कर को इन तरीकों से पसंद के मुताबिक बनाने का तरीका बताता है:

• टाइटल का टेक्स्ट जोड़ना
• मार्कर को स्केल करें
• बैकग्राउंड का रंग बदलना
• बॉर्डर का रंग बदलना
• ग्लिफ़ का रंग बदलना
• ग्लिफ़ को छिपाना

पहली इमेज: बेहतर मार्कर के हिस्से.

टाइटल के लिए टेक्स्ट जोड़ें

जब कर्सर किसी मार्कर पर घूमता है, तब टाइटल टेक्स्ट दिखता है. टाइटल का टेक्स्ट, स्क्रीन रीडर ऐक्सेस कर सकता है.

टाइटल वाले टेक्स्ट को प्रोग्राम के हिसाब से जोड़ने के लिए, AdvancedMarkerElement.title विकल्प का इस्तेमाल करें:

  
  
  
  
  
  

  

     
TypeScript
      
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js
    


एचटीएमएल का इस्तेमाल करके बनाए गए मार्कर में टाइटल टेक्स्ट जोड़ने के लिए, title एट्रिब्यूट का इस्तेमाल करें:

  
  
  
  
<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

मार्कर को स्केल करें

किसी मार्कर को स्केल करने के लिए, scale विकल्प का इस्तेमाल करें.


  
  
  
  
  
  

  

     
TypeScript
     
// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js
    


बैकग्राउंड का रंग बदलना

मार्कर का बैकग्राउंड रंग बदलने के लिए, PinElement.background विकल्प का इस्तेमाल करें:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js
    


बॉर्डर का रंग बदलें

मार्कर के बॉर्डर का रंग बदलने के लिए, PinElement.borderColor विकल्प का इस्तेमाल करें:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js
    


ग्लिफ़ का रंग बदलें

मार्कर का ग्लिफ़ रंग बदलने के लिए, PinElement.glyphColor विकल्प का इस्तेमाल करें:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js
    


ग्लिफ़ छिपाएं

मार्कर का ग्लिफ़ छिपाने के लिए, PinElement.glyph विकल्प को खाली स्ट्रिंग पर सेट करें:


  
  
  
  
  
  

  

     
TypeScript
     
// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts
    

      ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
    
    
    

    
JavaScript
      
  
  
  
 
// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js
    


इसके अलावा, PinElement.glyphColor की वैल्यू को PinElement.background पर सेट करें.
यह ग्लिफ़ को विज़ुअल तौर पर छिपाने का असर होता है.

आगे क्या करें:


ग्राफ़िक्स से मार्कर बनाएं