डेटा स्तर

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

Google Maps की डेटा लेयर, आर्बिट्रेरी भौगोलिक डेटा के लिए एक कंटेनर देती है. डेटा लेयर का इस्तेमाल करके, अपने कस्टम डेटा को सेव किया जा सकता है. इसके अलावा, जियोJSON डेटा को Google मैप पर दिखाया जा सकता है.

खास जानकारी

डेटा लेयर के बारे में ज़्यादा जानने के लिए, यह DevBytes वीडियो देखें.

Maps JavaScript API की मदद से, आपको अलग-अलग तरह के ओवरले वाले मैप को मार्कअप करने की सुविधा मिलती है. जैसे, मार्कर, पॉलीलाइन, पॉलीगॉन वगैरह. हर जानकारी के लिए, स्टाइल से जुड़ी जानकारी को जगह की जानकारी के डेटा के साथ इस्तेमाल किया जाता है. google.maps.Data क्लास, आर्बिट्रेरी भौगोलिक डेटा के लिए एक कंटेनर है. इन ओवरले को जोड़ने के बजाय, आप डेटा लेयर का इस्तेमाल करके अपने मैप में भौगोलिक डेटा जोड़ सकते हैं. अगर उस डेटा में ज्यामिति, जैसे बिंदु, रेखाएं या पॉलीगॉन हैं, तो API उन्हें डिफ़ॉल्ट रूप से मार्कर, पॉलीलाइन, और पॉलीगॉन के रूप में रेंडर करेगा. इन सुविधाओं को किसी सामान्य ओवरले की तरह स्टाइल दिया जा सकता है या आपके डेटा सेट में मौजूद दूसरी प्रॉपर्टी के आधार पर स्टाइल के नियम लागू किए जा सकते हैं.

google.maps.Data कक्षा से ये काम किए जा सकते हैं:

  • अपने मैप पर पॉलीगॉन बनाएं.
  • अपने मैप में GeoJSON डेटा जोड़ें.
    GeoJSON, इंटरनेट पर जियोस्पेशल डेटा का मानक है. Data क्लास, डेटा दिखाने के लिए GeoJSON के स्ट्रक्चर को फ़ॉलो करती है. इसकी मदद से, GeoJSON डेटा को आसानी से दिखाया जा सकता है. GeoJSON डेटा को आसानी से इंपोर्ट करने और डिसप्ले पॉइंट, लाइन स्ट्रिंग, और पॉलीगॉन बनाने के लिए, loadGeoJson() तरीके का इस्तेमाल करें.
  • आर्बिट्रेरी डेटा को मॉडल करने के लिए, google.maps.Data का इस्तेमाल करें.
    असल दुनिया की ज़्यादातर इकाइयों के साथ दूसरी प्रॉपर्टी जुड़ी होती हैं. उदाहरण के लिए, स्टोर के खुले होने का समय, सड़कों पर ट्रैफ़िक है, और हर गर्ल गाइड गाइड में कुकी बेचने वाला टर्फ़ है. google.maps.Data की मदद से, इन प्रॉपर्टी को मॉडल किया जा सकता है और डेटा को उसी के मुताबिक बनाया जा सकता है.
  • चुनें कि आपका डेटा कैसे दिखाया जाए और तुरंत अपना फ़ैसला बदलें.
    डेटा लेयर की मदद से, आपके पास अपने डेटा को विज़ुअलाइज़ करने और उसके इंटरैक्शन के बारे में फ़ैसले लेने का विकल्प होता है. उदाहरण के लिए, शॉपिंग स्टोर का मैप देखते समय, सिर्फ़ वही स्टोर दिखाए जा सकते हैं जो सार्वजनिक परिवहन के टिकट बेचते हैं.

कोई बहुभुज बनाएं

Data.Polygon क्लास आपके लिए पॉलीगॉन वाइंडिंग को हैंडल करती है. आपके पास इसे एक या ज़्यादा लीनियर रिंग का कलेक्शन पास करने का विकल्प है. इसे अक्षांश/देशांतर के निर्देशांकों के तौर पर परिभाषित किया जाता है. पहली लीनियर रिंग पॉलीगॉन की बाहरी सीमा तय करती है. अगर आप एक से ज़्यादा लीनियर रिंग पास करते हैं, तो पॉलीगॉन में आंतरिक पाथ (होल) बताने के लिए, दूसरी और उसके बाद की लीनियर रिंग इस्तेमाल की जाती हैं.

नीचे दिए गए उदाहरण में, एक आयताकार पॉलीगॉन बनाया गया है, जिसमें दो छेद हैं:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

GeoJSON लोड करें

GeoJSON, इंटरनेट पर जियोस्पेशल डेटा शेयर करने का एक सामान्य तरीका है. यह लाइटवेट है और आसानी से पढ़ा जा सकता है. इसे शेयर करना और साथ मिलकर काम करना आसान बनाता है. डेटा लेयर में, JSON कोड को कोड की सिर्फ़ एक लाइन में मौजूद Google मैप में जोड़ा जा सकता है.

map.data.loadGeoJson('google.json');

हर मैप में एक map.data ऑब्जेक्ट होता है, जो जियोJSON भी शामिल होता है. यह ऑब्जेक्ट के भौगोलिक डेटा के लिए, डेटा लेयर की तरह काम करता है. data ऑब्जेक्ट के loadGeoJSON() तरीके को कॉल करके, GeoJSON फ़ाइल लोड की जा सकती है और उसे दिखाया जा सकता है. नीचे दिए गए उदाहरण में मैप जोड़ने और बाहरी GeoJSON डेटा को लोड करने का तरीका बताया गया है.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
उदाहरण देखें

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

GeoJSON का नमूना

इस पेज पर मौजूद ज़्यादातर उदाहरणों में एक सामान्य GeoJSON फ़ाइल का इस्तेमाल किया जाता है. इस फ़ाइल में, ऑस्ट्रेलिया के 'Google' में पॉलीगॉन के छह वर्णों को दिखाया गया है. डेटा लेयर की जांच करते समय, आप चाहें, तो इस फ़ाइल को कॉपी कर लें या इसमें बदलाव कर लें.

ध्यान दें: किसी दूसरे डोमेन से कोई json फ़ाइल लोड करने के लिए, उस डोमेन में क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग चालू होनी चाहिए.

google.json शब्दों के पास दिए गए छोटे तीर को बड़ा करके, फ़ाइल का पूरा टेक्स्ट नीचे देखा जा सकता है.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

GeoJSON डेटा का स्टाइल

आपका डेटा कैसा दिखना चाहिए, यह बताने के लिए Data.setStyle() तरीके का इस्तेमाल करें. setStyle() तरीका या तो StyleOptionsऑब्जेक्ट लिटरल होता है या कोई ऐसा फ़ंक्शन जो हर सुविधा के स्टाइल का हिसाब लगाता है.

स्टाइल के आसान नियम

स्टाइल करने का सबसे आसान तरीका है, StyleOptions ऑब्जेक्ट को लिटरल setStyle() पर पास करना. इससे आपके संग्रह की हर सुविधा के लिए एक ही शैली सेट होगी. ध्यान दें कि हर तरह की सुविधा सिर्फ़ उपलब्ध विकल्पों के सबसेट को रेंडर कर सकती है. इसका मतलब है कि एक ऑब्जेक्ट में कई तरह की सुविधाओं के लिए स्टाइल को जोड़ना चाहिए. उदाहरण के लिए, नीचे दिया गया स्निपेट एक कस्टम icon, दोनों को सेट करता है, जो सिर्फ़ पॉइंट ज्यॉमेट्री और fillColor पर असर डालता है. इससे सिर्फ़ पॉलीगॉन पर असर पड़ता है.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

स्टाइल/सुविधा के सही कॉम्बिनेशन के बारे में ज़्यादा जानकारी के लिए, स्टाइल के विकल्प देखें.

StyleOptions ऑब्जेक्ट लिटरल का इस्तेमाल करके कई सुविधाओं के लिए, स्ट्रोक सेट करने और रंग भरने का उदाहरण नीचे दिया गया है. ध्यान दें कि हर पॉलीगॉन का स्टाइल एक जैसा होता है.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

एलान करने वाले शैली के नियम

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

उदाहरण के लिए, नीचे दिया गया कोड हमारे google.json में हर वर्ण का रंग सेट करता है. इसके लिए, वह ASCII में शामिल वर्ण की स्थिति को जांचता है. इस मामले में हमने अपने डेटा के साथ वर्ण की स्थिति को कोड में बदला है.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

स्टाइल हटाएं

अगर आपको लागू की गई किसी भी शैली को हटाना है, तो setStyles() विधि को एक खाली ऑब्जेक्ट लिटरल पास करें.

// Remove custom styles.
map.data.setStyle({});

यह आपके बताए गए कस्टम स्टाइल को हटा देगा और सुविधाएं, डिफ़ॉल्ट स्टाइल का इस्तेमाल करके रेंडर करेंगी. अगर आपको अब इस सुविधा को रेंडर नहीं करना है, तो StyleOptions की visible प्रॉपर्टी को false पर सेट करें.

// Hide the Data layer.
map.data.setStyle({visible: false});

डिफ़ॉल्ट स्टाइल बदलें

स्टाइल करने के नियम आम तौर पर डेटा लेयर की हर सुविधा पर लागू होते हैं. हालांकि, कई बार ऐसा हो सकता है कि आप खास सुविधाओं पर खास स्टाइल के नियम लागू करना चाहें. उदाहरण के लिए, क्लिक पर किसी सुविधा को हाइलाइट करने के तरीके के रूप में.

स्टाइल के खास नियमों को लागू करने के लिए, overrideStyle() तरीके का इस्तेमाल करें. overrideStyle() तरीके से बदली गई कोई भी प्रॉपर्टी, setStyle() में पहले से तय ग्लोबल स्टाइल के साथ ही भी लागू होती है. उदाहरण के लिए, नीचे दिया गया कोड क्लिक पर पॉलीगॉन के रंग को बदलेगा, लेकिन किसी दूसरे स्टाइल को सेट नहीं करेगा.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

स्टाइल में किए गए सभी बदलावों को हटाने के लिए, revertStyle() तरीके को कॉल करें.

शैली के विकल्प

सुविधा के अलग-अलग तरीकों के लिए उपलब्ध विकल्प, इस बात पर निर्भर करते हैं कि सुविधा किस तरह की है. उदाहरण के लिए, fillColor सिर्फ़ पॉलीगॉन ज्यामिति पर रेंडर करेगा, जबकि icon सिर्फ़ ज्यामिति पर दिखेगा. ज़्यादा जानकारी के लिए संदर्भ दस्तावेज़ देखें StyleOptions.

सभी ज्यामितियों पर उपलब्ध है

  • clickable: अगर true, सुविधा को माउस और टच इवेंट मिलते हैं
  • visible: अगर true है, तो सुविधा दिख रही है.
  • zIndex: सभी सुविधाओं को zIndex के साथ मैप पर दिखाया जाता है, जिसमें कम वैल्यू वाली सुविधाओं के सामने ज़्यादा वैल्यू दिखाई जाती हैं. मार्कर हमेशा लाइन-स्ट्रिंग और पॉलीगॉन के पहले दिखाए जाते हैं.

पॉइंट ज्यॉमेट्री पर उपलब्ध है

  • cursor: माउस घुमाने पर दिखाने के लिए माउस कर्सर.
  • icon: बिंदु ज्यामिति के लिए दिखाया जाने वाला आइकन.
  • shape: हिट की पहचान करने के लिए इस्तेमाल किए जाने वाले इमेज मैप के बारे में बताता है.
  • title: रोलओवर टेक्स्ट.

लाइन जियोमेट्री पर उपलब्ध

  • strokeColor: स्ट्रोक का रंग. सिर्फ़ नाम वाले रंग को छोड़कर, CSS3 के सभी रंग इस्तेमाल किए जा सकते हैं.
  • strokeOpacity: 0.0 और 1.0 के बीच के स्ट्रोक की अपारदर्शिता.
  • strokeWeight: पिक्सल में स्ट्रोक की चौड़ाई.

पॉलीगॉन ज्यामिति पर उपलब्ध

  • fillColor: फ़िल कलर. सिर्फ़ नाम वाले रंग को छोड़कर, CSS3 के सभी रंग इस्तेमाल किए जा सकते हैं.
  • fillOpacity से 0.0 और 1.0. के बीच का ओपैसिटी (अपारदर्शिता)
  • strokeColor: स्ट्रोक का रंग. सिर्फ़ नाम वाले रंग को छोड़कर, CSS3 के सभी रंग इस्तेमाल किए जा सकते हैं.
  • strokeOpacity: 0.0 और 1.0 के बीच के स्ट्रोक की अपारदर्शिता.
  • strokeWeight: पिक्सल में स्ट्रोक की चौड़ाई.

इवेंट हैंडलर जोड़ें

सुविधाएं, इवेंट को जवाब देती हैं, जैसे कि mouseup या mousedown. इवेंट सुनने वाले लोगों को जोड़ा जा सकता है, ताकि उपयोगकर्ता मैप में मौजूद डेटा से इंटरैक्ट कर सकें. नीचे दिए गए उदाहरण में, हम एक माउसओवर इवेंट जोड़ते हैं, जो माउस कर्सर में सुविधा के बारे में जानकारी दिखाता है.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

डेटा लेयर इवेंट

ये इवेंट सभी सुविधाओं के लिए आम हैं, भले ही उनका ज्यामिति प्रकार कुछ भी हो:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

इन इवेंट के बारे में ज़्यादा जानकारी, google.maps.data क्लास के संदर्भ दस्तावेज़ में देखी जा सकती है.

थीम डाइनैमिक तौर पर बदलें

डेटा लेयर की स्टाइल, google.maps.data.setStyle() फ़ंक्शन के लिए हर सुविधा के स्टाइल का हिसाब लगाने वाले फ़ंक्शन को पास करके सेट की जा सकती है. जब भी किसी सुविधा की प्रॉपर्टी अपडेट की जाएगी, तो यह फ़ंक्शन कॉल किया जाएगा.

नीचे दिए गए उदाहरण में, हमने click इवेंट के लिए एक इवेंट लिसनर जोड़ा है, जो इस सुविधा की isColorful प्रॉपर्टी को अपडेट करता है. जैसे ही प्रॉपर्टी सेट होती है, सुविधा का स्टाइल अपडेट कर दिया जाता है और बदलाव दिखने लगते हैं.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});