Places UI Kit: यह इस्तेमाल के लिए तैयार लाइब्रेरी है. इससे डेवलपर को अपनी ज़रूरत के मुताबिक बदलाव करने और कंट्रोल करने की सुविधा मिलती है. इसे आज़माएं और यूआई किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

बाउंड्री पॉलीगॉन को स्टाइल करना

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

खास जानकारी

बाउंड्री पॉलीगॉन में रंग भरने और स्ट्रोक के लिए स्टाइल तय करने के लिए, FeatureStyleOptions का इस्तेमाल करके स्टाइल एट्रिब्यूट तय करें. साथ ही, किसी फ़ीचर लेयर पर style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें. इसमें स्टाइल से जुड़ी लॉजिक शामिल होती है.

यहां दिए गए उदाहरण के तौर पर दिखाए गए मैप में, किसी एक इलाके के लिए बाउंड्री पॉलीगॉन को हाइलाइट किया गया है.

बाउंड्री फ़ीचर पर स्टाइल लागू करने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें. इसमें स्टाइल से जुड़ी लॉजिक शामिल हो सकती है. स्टाइल फ़ंक्शन, फ़ीचर लेयर में मौजूद हर फ़ीचर पर लागू होता है. इसे स्टाइल प्रॉपर्टी सेट करने के समय लागू किया जाता है. इसे अपडेट करने के लिए, आपको स्टाइल प्रॉपर्टी को फिर से सेट करना होगा.

किसी फ़ीचर लेयर के सभी फ़ीचर के लिए एक जैसी स्टाइल तय करने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleOptions पर सेट करें. इस मामले में, आपको फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल करने की ज़रूरत नहीं है, क्योंकि इसमें लॉजिक की ज़रूरत नहीं होती.

स्टाइल फ़ंक्शन को, फ़ीचर पर लागू करने पर हमेशा एक जैसे नतीजे देने चाहिए. उदाहरण के लिए, अगर आपको फ़ीचर के सेट में रैंडम तरीके से रंग भरना है, तो रैंडम तरीके से रंग भरने की प्रोसेस, फ़ीचर स्टाइल फ़ंक्शन में नहीं होनी चाहिए. ऐसा करने से, अनचाहे नतीजे मिल सकते हैं.

यह फ़ंक्शन, किसी लेयर में मौजूद हर फ़ीचर पर लागू होता है. इसलिए, इसे ऑप्टिमाइज़ करना ज़रूरी है. रेंडरिंग में लगने वाले समय पर असर पड़ने से बचने के लिए:

सिर्फ़ उन लेयर को चालू करें जिनकी आपको ज़रूरत है.
जब किसी लेयर का इस्तेमाल न किया जा रहा हो, तब style को null पर सेट करें.

स्थानीयता फ़ीचर लेयर में किसी पॉलीगॉन के लिए स्टाइल तय करने के लिए, यह तरीका अपनाएं:

अगर आपने अब तक ऐसा नहीं किया है, तो नया मैप आईडी और मैप स्टाइल बनाने के लिए, शुरू करें में दिया गया तरीका अपनाएं. स्थानीयता फ़ीचर लेयर को ज़रूर चालू करें.
मैप के शुरू होने पर, स्थानीयता फ़ीचर लेयर का रेफ़रंस पाएं.
TypeScript
```
// Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);index.ts
```
ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.
JavaScript
```
// Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);index.js
```
google.maps.FeatureStyleFunction टाइप की स्टाइल की परिभाषा बनाएं.

फ़ीचर लेयर पर style प्रॉपर्टी को FeatureStyleFunction पर सेट करें. यहां दिए गए उदाहरण में, सिर्फ़ उस google.maps.Feature पर स्टाइल लागू करने के लिए फ़ंक्शन तय करने का तरीका दिखाया गया है जिसका प्लेस आईडी, खोज के नतीजों में मिले प्लेस आईडी से मेल खाता है:

TypeScript

// Define a style with purple fill and border.
const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5,
};

// Apply the style to a single boundary.
featureLayer.style = (options: { feature: { placeId: string } }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};index.ts

JavaScript

// Define a style with purple fill and border.
const featureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5,
};
// Apply the style to a single boundary.
featureLayer.style = (options) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
        // Hana, HI
        return featureStyleOptions;
    }
};index.js

अगर तय किया गया प्लेस आईडी नहीं मिलता है या वह चुने गए फ़ीचर टाइप से मेल नहीं खाता है, तो स्टाइल लागू नहीं होती. उदाहरण के लिए, "नई दिल्ली" के प्लेस आईडी से मेल खाने वाली POSTAL_CODE लेयर के लिए स्टाइल तय करने की कोशिश करने पर, कोई स्टाइल लागू नहीं होगी.

किसी लेयर से स्टाइल हटाना

किसी लेयर से स्टाइल हटाने के लिए, style को null पर सेट करें:

featureLayer.style = null;

फ़ीचर को टारगेट करने के लिए, प्लेस आईडी ढूंढना

इलाकों के लिए प्लेस आईडी पाने के लिए:

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

कवरेज, इलाके के हिसाब से अलग-अलग होता है. ज़्यादा जानकारी के लिए, Google की बाउंड्री का कवरेज देखें.

भौगोलिक नामों की जानकारी कई सोर्स से मिलती है. जैसे, USGS Board on Geographic Names, और U.S. Gazetteer Files.

कोड का पूरा उदाहरण

TypeScript

let featureLayer;

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;

    // Get the gmp-map element.
    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

    // Define a style with purple fill and border.
    const featureStyleOptions: google.maps.FeatureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options: { feature: { placeId: string } }) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}

initMap();index.ts

JavaScript

let featureLayer;
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };
    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();index.js

CSS

/* 
 * 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;
}
style.css

HTML

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>index.html

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

JSFiddle.net