डेटा स्तर

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

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

खास जानकारी

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

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

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 }, // 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,
    ]),
  });
}

window.initMap = initMap;
index.js

GeoJSON लोड करें

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

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

हर मैप में एक map.data ऑब्जेक्ट होता है, जो किसी भी तरह के जियोस्पेशियल डेटा के लिए डेटा लेयर के तौर पर काम करता है. इसमें GeoJSON भी शामिल है. GeoJSON फ़ाइल को लोड किया जा सकता है और दिखाया जा सकता है. इसके लिए, data ऑब्जेक्ट के loadGeoJSON() तरीके का इस्तेमाल करें. नीचे दिए गए उदाहरण में, मैप जोड़ने और बाहरी 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();
});