डेटा लेयर

प्लैटफ़ॉर्म चुनें: 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;

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;

GeoJSON लोड करना

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

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

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

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
उदाहरण देखें

GeoJSON की सुविधाओं पर, लैंड पार्सल एरिया और पॉइंट-इन-पॉलीगॉन कंटेनमेंट का हिसाब लगाना

किसी बाहरी यूआरएल को फ़ेच किए बिना, इन-मेमोरी GeoJSON FeatureCollection (जैसे, जीआईएस लैंड पार्सल, कैडस्ट्रल ज़ोन या इलाके की सीमाएं) लोड करने के लिए, map.data.addGeoJson(geojsonObject) को कॉल करें.

बाउंड्री नोट (Data.Polygon बनाम google.maps.geometry): geometry लाइब्रेरी में मौजूद फ़ंक्शन, जैसे कि google.maps.geometry.spherical.computeArea() और google.maps.geometry.poly.containsLocation(), google.maps.Data.Feature या google.maps.Data.Polygon ऑब्जेक्ट को सीधे तौर पर स्वीकार नहीं करते. क्षेत्रफल को वर्ग मीटर में कैलकुलेट करने या यह देखने के लिए कि कोई निर्देशांक किसी GeoJSON पॉलीगॉन के अंदर आता है या नहीं, सबसे पहले feature.getGeometry().getAt(0).getArray() का इस्तेमाल करके, बाहरी रिंग के LatLng अरे को निकालें:

const { spherical, poly } = await google.maps.importLibrary("geometry");

map.data.forEach((feature) => {
  const geom = feature.getGeometry();
  if (geom.getType() === "Polygon") {
    const outerRingCoords = geom.getAt(0).getArray(); // Array<google.maps.LatLng>
    const areaSqMeters = spherical.computeArea(outerRingCoords);
    const isInside = poly.containsLocation(pointLatLng, new google.maps.Polygon({ paths: outerRingCoords }));
  }
});

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 ऑब्जेक्ट लिटरल या हर सुविधा के लिए स्टाइल कंप्यूट करने वाले फ़ंक्शन का इस्तेमाल करता है.

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

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

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

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

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

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

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

void init();

JavaScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

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

void init();

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

एचटीएमएल

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>
उदाहरण देखें

डिक्लेरेटिव स्टाइल के नियम

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

उदाहरण के लिए, यहां दिया गया कोड, हमारे 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.
innerMap.data.addListener('mouseover', (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();
});