डेटा स्तर

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

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

खास जानकारी

डेटा लेयर के बारे में ज़्यादा जानने के लिए, यह 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, जियोस्पेशियल डेटा शेयर करने का एक सामान्य मानक है के बारे में बात करते हैं. यह हल्का है और इसे कोई भी व्यक्ति आसानी से पढ़ सकता है. इसलिए, इसे बेहतरीन बनाया गया है शेयर करने और साथ मिलकर काम करने के लिए. डेटा लेयर की मदद से, GeoJSON डेटा को जोड़ा जा सकता है कोड की सिर्फ़ एक लाइन में Google मैप जोड़ सकते हैं.

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

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

घोषणात्मक शैली के नियम

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

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

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