डेटा लेयर

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

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

खास जानकारी

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

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

google.maps.Data क्लास की मदद से:

  • अपने मैप पर पॉलीगॉन ड्रॉ करें.
  • अपने मैप में GeoJSON डेटा जोड़ें.
    इंटरनेट पर मौजूद भौगोलिक डेटा के लिए, GeoJSON एक स्टैंडर्ड है. Data क्लास, डेटा को दिखाने के लिए GeoJSON के स्ट्रक्चर का पालन करती है. साथ ही, इससे GeoJSON डेटा को आसानी से दिखाया जा सकता है. loadGeoJson() तरीके का इस्तेमाल करके, आसानी से GeoJSON डेटा इंपोर्ट करें और पॉइंट, लाइन-स्ट्रिंग, और पॉलीगॉन दिखाएं.
  • किसी भी तरह के डेटा को मॉडल करने के लिए, 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 के साथ-साथ, किसी भी तरह के भौगोलिक डेटा के लिए डेटा लेयर के तौर पर काम करता है. 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: स्ट्रोक का रंग. एक्सटेंडेड नेम वाले रंगों को छोड़कर, सभी सीएसएस3 रंग इस्तेमाल किए जा सकते हैं.
  • strokeOpacity: स्ट्रोक की ओपैसिटी 0.0 से 1.0 के बीच होनी चाहिए.
  • strokeWeight: स्ट्रोक की चौड़ाई, पिक्सल में.

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

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

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

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

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