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

KmlLayer माइग्रेशन के पाथ

परिचय

इस गाइड का मकसद, KmlLayer के सबसे सामान्य इस्तेमाल के बारे में बताना है. साथ ही, इसे लागू करने के अन्य तरीकों के बारे में जानकारी देना है. यह जानकारी उन डेवलपर के लिए है जिन्हें KmlLayer के इस्तेमाल से ट्रांज़िशन करना है, क्योंकि इसे बंद किया जा रहा है. KmlLayer के साथ काम करने वाला आखिरी वर्शन 3.65 है. इसे मई 2027 में बंद कर दिया जाएगा.

माइग्रेट करने का तरीका इस बात पर निर्भर करता है कि KmlLayer का इस्तेमाल कैसे किया जा रहा है:

सीमा/बॉर्डर/दिलचस्पी के इलाके की जानकारी को स्टाइल करने के लिए KML फ़ाइल : Google के सीमा डेटा का इस्तेमाल करके, प्रशासनिक इलाकों के लिए सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग (डीडीएस) का इस्तेमाल करें.
वेक्टर डेटा (पॉइंट/पॉलीलाइन/सीमाएं/पॉलीगॉन) वाली KML फ़ाइल: डेटासेट के लिए DDS, GeoJSON या deck.gl या geoxml3 जैसी तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें.
इंटरैक्टिव एलिमेंट वाली KML फ़ाइल: सुविधा के साथ इंटरैक्ट करने के लिए, मैन्युअल इवेंट लिसनर और कस्टम जानकारी वाली विंडो लागू करें.
इमेज वाली KML फ़ाइल: इमेज ओवरले के लिए, GroundOverlays या तीसरे पक्ष के पार्सर का इस्तेमाल करें.
नेटवर्क लिंक वाली KML फ़ाइल: हर KML को अलग डेटासेट के तौर पर अपलोड करें या KML को मर्ज करें. डाइनैमिक डेटा दिखाने के लिए, Datasets API का इस्तेमाल करके डेटासेट को रीफ़्रेश करें.
स्क्रीन ओवरले दिखाने के लिए KML का इस्तेमाल करना: लोगो, लेजेंड या नेविगेशन में मदद करने वाले टूल जैसे फ़िक्स किए गए यूज़र इंटरफ़ेस (यूआई) एलिमेंट को बदलने के लिए, कस्टम कंट्रोल का इस्तेमाल करें.

सीमा/बॉर्डर/दिलचस्पी के इलाके की जानकारी को स्टाइल करने के लिए KML फ़ाइल

अगर डेवलपर, KmlLayer का इस्तेमाल करके प्रशासनिक सीमाएं दिखाते या स्टाइल करते हैं, जैसे कि किसी देश, राज्य या इलाके को हाइलाइट करना, तो Google Maps Platform उन्हें सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग (डीडीएस) पर माइग्रेट करने का सुझाव देता है.

माइग्रेशन का सुझाव: सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग

सीमाओं के लिए डेटा के हिसाब से स्टाइल तय करने की सुविधा की मदद से, Google के प्रशासनिक सीमा वाले पॉलीगॉन को सीधे तौर पर ऐक्सेस किया जा सकता है. इससे आपको इन इलाकों में कस्टम स्टाइल (भरना और स्ट्रोक करना) लागू करने की सुविधा मिलती है. इसके लिए, आपको बाहरी KML फ़ाइलों को होस्ट या मैनेज करने की ज़रूरत नहीं होती.

उपलब्ध FeatureType

प्रशासनिक क्षेत्रों को उनके फ़ंक्शन के हिसाब से कैटगरी में बांटा जाता है और लेवल के हिसाब से व्यवस्थित किया जाता है. स्टाइलिंग के लिए, यहां दिए गए फ़ीचर टाइप इस्तेमाल किए जा सकते हैं:

COUNTRY: राष्ट्रीय राजनीतिक इकाई.
ADMINISTRATIVE_AREA_LEVEL_1: यह देश के स्तर से नीचे, पहले क्रम की नागरिक इकाई होती है. उदाहरण के लिए, अमेरिका के राज्य.
ADMINISTRATIVE_AREA_LEVEL_2: यह देश के लेवल से नीचे, दूसरे क्रम की नागरिक इकाई होती है. जैसे, अमेरिका में काउंटी.
LOCALITY: कोई निगमित शहर या कस्बा.
POSTAL_CODE: मेल के लिए इस्तेमाल किए जाने वाले पिन कोड.
SCHOOL_DISTRICT: यूनिफ़ाइड, प्राइमरी या सेकंडरी स्कूल डिस्ट्रिक्ट.

जानें कि इन सुविधाओं के लिए, सीमा की जानकारी किन इलाकों में उपलब्ध है.

किसी इलाके को हाइलाइट करने का तरीका

किसी खास इलाके को स्टाइल करने के लिए, आपको उसे उसके जगह के आईडी से टारगेट करना होगा.

सेटअप: आपको JavaScript वेक्टर मैप टाइप के लिए कॉन्फ़िगर किया गया मैप आईडी इस्तेमाल करना होगा. साथ ही, Google Cloud Console में उपलब्ध फ़ीचर लेयर को चालू करना होगा.
लागू करना: स्टाइल अ बाउंड्री पॉलीगॉन सैंपल कोड का इस्तेमाल करें.

पैन करने की सुविधा को किसी जगह तक सीमित करना

उपयोगकर्ताओं को हाइलाइट की गई जगह के बाउंडिंग बॉक्स से बाहर नेविगेट करने से रोकने के लिए, MapOptions में मौजूद restriction विकल्प का इस्तेमाल किया जा सकता है.

restriction ऑब्जेक्ट, एक latLngBounds तय करता है. यह मैप के दिखने वाले एरिया को सीमित करता है. पाबंदी कैसे काम करती है, इस बारे में ज़्यादा जानकारी के लिए, दस्तावेज़ देखें.

// Restrict panning to a specific bounding box
restriction: {
  latLngBounds: {
    north: 47.8,
    south: 45.8,
    east: 10.5,
    west: 5.9,
  },
  strictBounds: true,
},

माइग्रेशन की खास जानकारी को लागू करना

यहां सीमाओं के लिए डेटा पर आधारित स्टाइलिंग और किसी क्षेत्र के लिए पाबंदी लगाने का पूरा उदाहरण दिया गया है. इससे मैप को किसी खास इलाके के आस-पास फ़ोकस किया जा सकता है.

const myTargetRegion = "ChIJYW1Zb-9kjEcRFXvLDxG1Vlw"; // Place ID for Switzerland

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 46.8, lng: 8.2 },
    zoom: 9,
    mapId: "YOUR_MAP_ID", // Required for DDS
    // Restrict panning to a specific bounding box
    restriction: {
    // Bounding box for Switzerland
      latLngBounds: {
        north: 47.8,
        south: 45.8,
        east: 10.5,
        west: 5.9,
      },
      strictBounds: true,
    },
  });

  // Access the Country layer and style a specific region by Place ID
  const countryLayer = map.getFeatureLayer("COUNTRY");
  countryLayer.style = (options) => {
    if (options.feature.placeId === myTargetRegion) {
      return {
        fillColor: "#FF0000",
        fillOpacity: 0.5,
        strokeColor: "#FF0000",
        strokeWeight: 2,
      };
    } else {
    // Style everything else whited out, to make the area of interest pop out more.
      return {
        fillColor: '#ffffff',
        fillOpacity: 0.8,
      };
    }
  };
}

वेक्टर डेटा वाली KML फ़ाइल (पॉइंट/पॉलीलाइन/सीमाएं/पॉलीगॉन)

माइग्रेशन का सुझाव: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग

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

डेटासेट के लिए डेटा के हिसाब से स्टाइल तय करने की सुविधा की मदद से, अपना जियोस्पेशियल डेटा (KML, GeoJSON या CSV) अपलोड किया जा सकता है. साथ ही, डेटा एट्रिब्यूट के आधार पर कस्टम स्टाइल लागू की जा सकती है. इसके अलावा, वेक्टर मैप पर सुविधाएं दिखाई जा सकती हैं.

1. सेटअप करना और अपलोड करना

KmlLayer, रनटाइम के दौरान यूआरएल फ़ेच करता है. हालांकि, DDS के लिए आपको Google Cloud Console में डेटा को डेटासेट के तौर पर होस्ट करना होगा.

मैप आईडी बनाएं: वेक्टर मैप टाइप के लिए कॉन्फ़िगर किया गया मैप आईडी इस्तेमाल करें.
डेटासेट अपलोड करें: Google Cloud Console में अपनी KML फ़ाइल अपलोड करें, ताकि एक यूनीक डेटासेट आईडी जनरेट किया जा सके. ज़्यादा जानकारी के लिए, Maps Datasets को मैनेज करने के तरीके से जुड़ा पूरा दस्तावेज़ पढ़ें.
डेटासेट दिखाना: डेटासेट आईडी बनाने के बाद, आपको डेटासेट को Maps के स्टाइल और मैप आईडी से जोड़ना होगा. इसके बाद, मैप पर डेटा दिखाने के लिए, डेटासेट आईडी का इस्तेमाल किया जाएगा. पूरी जानकारी के लिए, मैप में डेटासेट जोड़ने के तरीके के बारे में पूरा दस्तावेज़ पढ़ें.
अगर आपको KML फ़ॉर्मैट से डेटा इंपोर्ट करना है, तो डेटासेट के लिए KML फ़ॉर्मैट से जुड़ी ज़रूरी शर्तों को ध्यान में रखें.

2. व्यूपोर्ट को डेटा पर सेट करना

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

हार्डकोड की गई पाबंदियां: अगर डेटा एरिया स्टैटिक है, तो MapOptions में restriction विकल्प का इस्तेमाल करके, व्यूपोर्ट को खास सीमाओं तक लॉक करें.
डाइनैमिक ज़ूमिंग: व्यूपोर्ट को डाइनैमिक रूप से सेट करने के लिए, अपने डेटासेट के बाउंडिंग बॉक्स के साथ map.fitBounds() का इस्तेमाल किया जा सकता है.

3. सुविधा के एट्रिब्यूट से स्टाइलिंग करना

KML फ़ाइलों में अक्सर स्टाइल की जानकारी (जैसे, रंग) शामिल होती है. हालांकि, DDS इसे अपने-आप लागू नहीं करता. आपको क्लाइंट-साइड स्टाइल फ़ंक्शन बनाना होगा. यह फ़ंक्शन, डेटासेट की सुविधाओं से एट्रिब्यूट को पढ़ता है, ताकि रंग और ओपेसिटी लागू की जा सके. पूरी जानकारी के लिए, अपने डेटा को स्टाइल करने के तरीके के बारे में डेवलपर का दस्तावेज़ देखें.

उदाहरण: एट्रिब्यूट का इस्तेमाल करके स्टाइलिंग फ़ंक्शन

यहां दिए गए उदाहरण में, ऐसा स्टाइल फ़ंक्शन बनाने का तरीका बताया गया है जो अपलोड किए गए डेटासेट से सीधे तौर पर background_color और opacity एट्रिब्यूट को पढ़ता है:

/**
 * Migration example: Styling features from dataset attributes.
 */
function styleDDSLayer(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Set the style function
  datasetLayer.style = (params) => {
    // Access attributes defined in your KML/Dataset
    const featureAttributes = params.feature.datasetAttributes;

    // Read style values from attributes, with fallback defaults
    const fillColor = featureAttributes['background_color'] || '#4285F4';
    const fillOpacity = parseFloat(featureAttributes['opacity']) || 0.5;
    const strokeColor = featureAttributes['border_color'] || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: fillOpacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
    };
  };
}

इंटरैक्शन और स्टाइलिंग लागू करने के बारे में ज़्यादा जानने के लिए, डेटासेट के लिए डेटा पर आधारित स्टाइलिंग की खास जानकारी और डाइनैमिक डेटा के लिए Datasets API देखें.

माइग्रेशन का सुझाव: GeoJSON के साथ क्लाइंट-साइड रेंडरिंग

KmlLayer से GeoJSON के साथ क्लाइंट-साइड रेंडरिंग पर माइग्रेट करने वाले डेवलपर के लिए, Google Maps Platform एक माइग्रेशन पाथ का सुझाव देता है. इसमें आपके डेटा फ़ॉर्मैट को बदलना और ब्राउज़र में सीधे तौर पर सुविधाओं को रेंडर और स्टाइल करने के लिए, डेटा लेयर का इस्तेमाल करना शामिल है.

डेटा लेयर का इस्तेमाल करके क्लाइंट-साइड रेंडरिंग की मदद से, भौगोलिक डेटा को दिखाने का एक बहुत ही आसान तरीका मिलता है. KmlLayer को Google के सर्वर पर रेंडर किया जाता है. हालांकि, डेटा लेयर की मदद से, सुविधाओं के साथ स्टैंडर्ड JavaScript ऑब्जेक्ट के तौर पर इंटरैक्ट किया जा सकता है. हालांकि, ध्यान दें कि बड़े डेटासेट के लिए, आपको सर्वर-साइड प्रोसेसिंग और डेटा रेंडरिंग का इस्तेमाल करना पड़ सकता है. जैसे, डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग.

1. KML को GeoJSON में बदलना

पहला चरण, अपनी KML फ़ाइलों को GeoJSON में बदलना है. इसके लिए, कई लोकप्रिय ओपन-सोर्स टूल का इस्तेमाल किया जा सकता है:

ogr2ogr: GDAL सुइट का हिस्सा, यह कमांड-लाइन यूटिलिटी कई वेक्टर फ़ॉर्मैट के बीच बदल सकती है.

ogr2ogr -f GeoJSON output.json input.kml

togeojson: यह एक छोटा टूल है, जिसे अच्छी तरह से टेस्ट किया गया है. इसे खास तौर पर KML और GPX को GeoJSON में बदलने के लिए डिज़ाइन किया गया है.

togeojson input.kml > output.json

2. व्यूपोर्ट को डेटा पर सेट करना

KmlLayer डेटा की जगह के हिसाब से अपने-आप पैन और ज़ूम होता है, जबकि डेटा लेयर ऐसा नहीं करती. अपने GeoJSON डेटा के हिसाब से व्यूपोर्ट सेट करने के लिए, आपको बाउंडिंग बॉक्स का हिसाब मैन्युअल तरीके से लगाना होगा और map.fitBounds() को कॉल करना होगा.

3. सुविधा के एट्रिब्यूट से स्टाइलिंग करना

डेटा लेयर में, एक style फ़ंक्शन तय किया जा सकता है. यह फ़ंक्शन, हर GeoJSON सुविधा से सीधे तौर पर एट्रिब्यूट (प्रॉपर्टी) को पढ़कर, यह तय करता है कि उसे कैसा दिखना चाहिए.

उदाहरण: स्टाइलिंग फ़ंक्शन और व्यूपोर्ट अडजस्टमेंट

यहां दिए गए उदाहरण में बताया गया है कि GeoJSON डेटा को कैसे लोड करें, व्यूपोर्ट सेट करने के लिए उसके बाउंड्री बॉक्स का हिसाब कैसे लगाएं, और एट्रिब्यूट के आधार पर सुविधाओं को कैसे स्टाइल करें:

/**
 * Migration example: Loading GeoJSON, fitting viewport, and styling from attributes.
 */
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // Load the GeoJSON data
  map.data.loadGeoJson('path/to/your/data.json', null, (features) => {
    // Adjust viewport to show all loaded features
    const bounds = new google.maps.LatLngBounds();
    features.forEach((feature) => {
      feature.getGeometry().forEachLatLng((latlng) => {
        bounds.extend(latlng);
      });
    });
    map.fitBounds(bounds);
  });

  // Set the style function to read from GeoJSON properties
  map.data.setStyle((feature) => {
    // Access attributes defined in your GeoJSON properties
    const fillColor = feature.getProperty('background_color') || '#4285F4';
    const opacity = parseFloat(feature.getProperty('opacity')) || 0.5;
    const strokeColor = feature.getProperty('border_color') || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: opacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
      visible: true
    };
  });
}

डेटा लेयर का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Maps में GeoJSON इंपोर्ट करना लेख पढ़ें.

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी के साथ क्लाइंट-साइड रेंडरिंग

अगर डेवलपर को KmlLayer के अलावा कोई और विकल्प चाहिए, तो कम्यूनिटी की ओर से मैनेज की जाने वाली कई लाइब्रेरी उपलब्ध हैं. ये लाइब्रेरी, Google Maps Platform JavaScript API पर KML डेटा रेंडर करती हैं.

1. deck.gl

deck.gl, WebGL पर आधारित एक विज़ुअलाइज़ेशन फ़्रेमवर्क है, जो बेहतरीन परफ़ॉर्मेंस देता है. इसका इस्तेमाल, KML रेंडरिंग के लिए किया जा सकता है. इसके लिए, GoogleMapsOverlay और GeoJsonLayer का इस्तेमाल करें.

कैनवस की ज़रूरी शर्तें: deck.gl का बेहतर तरीके से इस्तेमाल करने के लिए, आपको अपने मैप को वेक्टर मैप टाइप में बदलना होगा. यह मैप, WebGL रेंडरिंग की सुविधाओं के साथ कैनवस एलिमेंट में रेंडर होता है.
KML सपोर्ट: ज्यामिति पार्सिंग को @loaders.gl/kml मैनेज करता है. यह KML को GeoJSON में बदलता है. ध्यान दें कि KML की कुछ सुविधाओं, जैसे कि जटिल स्टाइल, आइकॉन, और NetworkLinks के लिए, मैन्युअल तरीके से लागू करने की ज़रूरत पड़ सकती है.
दस्तावेज़: deck.gl का दस्तावेज़ | loaders.gl का KML Loader.
उदाहरण:
- Google Maps की GitHub रिपॉज़िटरी में मौजूद deckgl-kml-updated सैंपल से पता चलता है कि रीयल-टाइम में अपडेट होने वाले KML डेटा को रेंडर करने के लिए, deck.gl का इस्तेमाल कैसे किया जाता है.
- deckgl-kml सैंपल में, KML डेटा को रेंडर करने के लिए deck.gl का इस्तेमाल करने का तरीका बताया गया है.

2. geoxml3

geoxml3 एक KML प्रोसेसर है. इसे खास तौर पर Google Maps JavaScript API v3 के लिए डिज़ाइन किया गया है. यह ब्राउज़र में KML को स्थानीय तौर पर पार्स करता है और डेटा को Google Maps API के स्टैंडर्ड ऑब्जेक्ट के तौर पर रेंडर करता है. जैसे, मार्कर, पॉलीलाइन, और पॉलीगॉन.

स्टैंडर्ड मैप के साथ काम करता है: WebGL पर आधारित समाधानों के उलट, geoxml3 स्टैंडर्ड Google Maps JS API v3 मैप पर काम करता है. इसके लिए, किसी खास रेंडरिंग मोड की ज़रूरत नहीं होती.
चेतावनियां:
- KMZ फ़ाइलों के लिए सीमित सहायता: यह लाइब्रेरी, KMZ फ़ाइलों के साथ पूरी तरह से काम नहीं करती है. KMZ फ़ाइलों को अनज़िप करने के लिए, आम तौर पर ZipFile.complete.js जैसी तीसरे पक्ष की अतिरिक्त स्क्रिप्ट के साथ इंटिग्रेट करना पड़ता है.
- काम न करने वाले एलिमेंट: 3D ज्यामिति, जटिल लेबल, और कुछ नए KML एलिमेंट जैसी सुविधाएं काम नहीं करती हैं.
दस्तावेज़: geoxml3 GitHub Repository.

इंटरैक्टिव एलिमेंट वाली KML फ़ाइल

माइग्रेशन का सुझाव: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग

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

शुरुआती सेटअप

इंटरैक्शन लागू करने से पहले, पक्का करें कि आपने KML माइग्रेशन: वेक्टर डेटा गाइड में दिए गए सेटअप के चरणों का पालन किया हो:

मैप आईडी: वेक्टर मैप टाइप के लिए मैप आईडी कॉन्फ़िगर करें.
अपलोड करें: Google Cloud Console में अपना KML डेटा अपलोड करें, ताकि आपको डेटासेट आईडी मिल सके.
लेयर का ऐक्सेस: इंटरैक्टिव लेयर को ऐक्सेस करने के लिए, map.getDatasetFeatureLayer(datasetId) का इस्तेमाल करें.

1. इंटरैक्शन इवेंट हैंडल करना

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

click: यह इवेंट तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी सुविधा पर क्लिक करता है.
mousemove: यह तब ट्रिगर होता है, जब कर्सर किसी सुविधा पर जाता है. यह सुविधा, होवर इफ़ेक्ट के लिए काम की है.

2. डाइनैमिक स्टाइलिंग (होवर इफ़ेक्ट)

डीडीएस स्टाइल को लेयर पर ग्लोबल तौर पर लागू किया जाता है. इसलिए, आपको एक स्टेट वैरिएबल बनाए रखना चाहिए, ताकि यह ट्रैक किया जा सके कि किस सुविधा के साथ इंटरैक्ट किया जा रहा है. साथ ही, स्टाइल को फिर से लागू किया जा सके.

let currentFeatureId = null;

function initInteraction(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Apply the style function
  datasetLayer.style = (params) => {
    const isHovered = params.feature.datasetAttributes['id'] === currentFeatureId;
    return {
      strokeColor: 'green',
      strokeWeight: isHovered ? 4.0 : 2.0, // Bold border on hover
      fillColor: 'green',
      fillOpacity: isHovered ? 0.5 : 0.3,
    };
  };

  // Add interaction listeners
  datasetLayer.addListener('mousemove', (event) => {
    if (event.features.length > 0) {
      currentFeatureId = event.features[0].datasetAttributes['id'];
      datasetLayer.style = datasetLayer.style; // Re-apply style to reflect changes
    }
  });

  // Clear hover state when the mouse leaves the features
  map.addListener('mousemove', () => {
    if (currentFeatureId !== null) {
      currentFeatureId = null;
      datasetLayer.style = datasetLayer.style;
    }
  });
}

3. `description` एट्रिब्यूट से एचटीएमएल दिखाना

KML में, <description> टैग में अक्सर डिफ़ॉल्ट जानकारी वाली विंडो के लिए एचटीएमएल होता है. इस डेटा को डेटासेट के तौर पर इंपोर्ट करने पर, description एक फ़ीचर एट्रिब्यूट बन जाता है. इसे रेंडर करने के लिए, स्ट्रिंग को सीधे तौर पर स्टैंडर्ड google.maps.InfoWindow पर पास करें.

const infoWindow = new google.maps.InfoWindow();

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const feature = event.features[0];
    // Access the HTML description attribute
    const htmlContent = feature.datasetAttributes['description'];

    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

4. `ExtendedData` की मदद से पसंद के मुताबिक InfoWindow बनाना

अगर आपके KML में कस्टम नाम/वैल्यू के जोड़े सेव करने के लिए <ExtendedData> का इस्तेमाल किया जाता है, तो इन्हें datasetAttributes पर मैप किया जाता है. कस्टम एचटीएमएल डिसप्ले बनाने के लिए, इन एट्रिब्यूट को दोहराया जा सकता है.

function createCustomContent(feature) {
  const attributes = feature.datasetAttributes;
  const container = document.createElement("div");
  container.style.padding = "10px";
  container.innerHTML = "<h3>Feature Details</h3><dl></dl>";

  const dl = container.querySelector("dl");

  // Iterate through all data attributes imported from KML ExtendedData
  for (const key in attributes) {
    const dt = document.createElement("dt");
    dt.style.fontWeight = "bold";
    dt.textContent = key;

    const dd = document.createElement("dd");
    dd.textContent = attributes[key];

    dl.appendChild(dt);
    dl.appendChild(dd);
  }
  return container;
}

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const content = createCustomContent(event.features[0]);
    infoWindow.setContent(content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

विज़ुअलाइज़ेशन की ज़्यादा बेहतर तकनीकों के बारे में जानने के लिए, डेटा सुविधाओं को स्टाइल करने के तरीके के बारे में डेवलपर दस्तावेज़ देखें.

माइग्रेशन का सुझाव: GeoJSON के साथ क्लाइंट-साइड रेंडरिंग

इस गाइड में, KmlLayer से GeoJSON और डेटा लेयर की मदद से क्लाइंट-साइड रेंडरिंग पर माइग्रेट करने वाले डेवलपर के लिए जानकारी दी गई है. इसमें बताया गया है कि ऑटोमैटिक KML इंटरैक्शन से, कस्टम और इवेंट-ड्रिवन इंटरैक्शन और डाइनैमिक स्टाइलिंग पर कैसे स्विच किया जाए.

शुरुआती सेटअप

इंटरैक्शन लागू करने से पहले, आपको अपने KML डेटा को GeoJSON में बदलना होगा. इसके बाद, इसे डेटा लेयर में लोड करना होगा. माइग्रेशन का सुझाव: GeoJSON के साथ क्लाइंट-साइड रेंडरिंग गाइड देखें. इसमें ogr2ogr या togeojson जैसे टूल इस्तेमाल करने और map.data.loadGeoJson() की मदद से मैप को शुरू करने के बारे में जानकारी दी गई है.

1. ऑटोमैटिक और मैन्युअल इंटरैक्शन

इन लेयर के बीच मुख्य अंतर यह है कि ये उपयोगकर्ता के इनपुट को कैसे हैंडल करती हैं:

KmlLayer: यह सुविधा, क्लिक को अपने-आप मैनेज करती है. साथ ही, इसमें KML और डेटा वाला InfoWindow दिखता है.
डेटा लेयर: InfoWindow ऑब्जेक्ट अपने-आप नहीं दिखते. उपयोगकर्ता के इंटरैक्शन को कैप्चर करने के लिए, आपको इवेंट लिसनर को मैन्युअल तरीके से जोड़ना होगा. साथ ही, डेटा दिखाने के लिए कोड लिखना होगा.

2. इंटरैक्शन इवेंट हैंडल करना

GeoJSON सुविधाओं को इंटरैक्टिव बनाने के लिए, map.data ऑब्जेक्ट पर addListener() तरीके का इस्तेमाल करें. सामान्य इवेंट में ये शामिल हैं:

click: इसका इस्तेमाल, जानकारी वाली विंडो या चुनने के लॉजिक को ट्रिगर करने के लिए किया जाता है.
mouseover / mouseout: इसका इस्तेमाल, कर्सर घुमाने पर दिखने वाले इफ़ेक्ट और हाइलाइट करने के लिए किया जाता है.

3. InfoWindow में एचटीएमएल के ब्यौरे दिखाना

KML को GeoJSON में बदलने पर, <description> टैग (जिसमें अक्सर एचटीएमएल होता है) को आम तौर पर description नाम की प्रॉपर्टी पर मैप किया जाता है. इस स्ट्रिंग को वापस पाने और इसे स्टैंडर्ड google.maps.InfoWindow में रेंडर करने के लिए, feature.getProperty('description') का इस्तेमाल किया जा सकता है.

const infoWindow = new google.maps.InfoWindow();

// Handle clicks to show the HTML description
map.data.addListener('click', (event) => {
  // Access the 'description' property from the GeoJSON feature
  const htmlContent = event.feature.getProperty('description');

  if (htmlContent) {
    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

4. कस्टम InfoWindows और `ExtendedData`

अगर आपकी ओरिजनल KML फ़ाइल में <ExtendedData> का इस्तेमाल किया गया है, तो नाम-वैल्यू के इन जोड़ों को GeoJSON प्रॉपर्टी में बदल दिया जाता है. डेटा लेयर में इनके लिए डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) नहीं होता. इसलिए, आपको कस्टम InfoWindow लागू करना होगा, ताकि इन पर बारी-बारी से काम किया जा सके और इन्हें दिखाया जा सके.

event.feature.getProperty('attribute_name') का इस्तेमाल करके इन एट्रिब्यूट को ऐक्सेस किया जा सकता है. साथ ही, infoWindow.setContent() तरीके को पास करने के लिए, कस्टम एचटीएमएल स्ट्रिंग या डीओएम एलिमेंट बनाया जा सकता है.

5. डाइनैमिक स्टाइलिंग (होवर इफ़ेक्ट)

डेटा लेयर की मदद से, इवेंट के जवाब में प्रोग्राम के हिसाब से फ़ीचर स्टाइल अपडेट की जा सकती हैं. किसी सुविधा की स्टाइल को कुछ समय के लिए बदलने के लिए, overrideStyle() का इस्तेमाल करें.उदाहरण के लिए, होवर करने पर स्टाइल बदलना. इसके बाद, ग्लोबल स्टाइल पर वापस जाने के लिए revertStyle() का इस्तेमाल करें.

// Set a base style for all features
map.data.setStyle({
  fillColor: 'blue',
  strokeWeight: 1
});

// Highlight feature on mouseover
map.data.addListener('mouseover', (event) => {
  map.data.revertStyle(); // Clear previous highlights
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

// Revert style on mouseout
map.data.addListener('mouseout', (event) => {
  map.data.revertStyle();
});

लागू करने के बारे में ज़्यादा जानकारी के लिए, डेटा लेयर: इवेंट हैंडलिंग और डेटा लेयर: डाइनैमिक स्टाइलिंग के बारे में दस्तावेज़ देखें.

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी के साथ क्लाइंट-साइड रेंडरिंग

KmlLayer से तीसरे पक्ष के समाधानों पर माइग्रेट करने वाले डेवलपर के लिए, इस गाइड में इंटरैक्टिव डेटा को मैनेज करने के बारे में बताया गया है. जैसे, deck.gl और geoxml3 का इस्तेमाल करके माउस क्लिक और डाइनैमिक इवेंट को मैनेज करना.

शुरुआती सेटअप

इंटरैक्शन लागू करने से पहले, पक्का करें कि आपने माइग्रेशन पाथ: तीसरे पक्ष की लाइब्रेरी के साथ क्लाइंट-साइड रेंडरिंग गाइड में दिए गए सेटअप के चरणों का पालन किया हो. इसमें इस तरह का कॉन्टेंट शामिल है:

deck.gl: अपने मैप को वेक्टर मैप टाइप में बदलने के लिए (कैनवस की ज़रूरत होती है).
geoxml3: यह लाइब्रेरी स्क्रिप्ट को आपके होस्ट से दिखाता है और क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस) को मैनेज करता है.

1. deck.gl की मदद से इंटरैक्टिव डेटा

deck.gl, KML को सीधे तौर पर इनपुट फ़ॉर्मैट के तौर पर इस्तेमाल करता है. साथ ही, KML फ़ाइल में दिए गए डेटा के आधार पर, क्लिक जैसे फ़ीचर इंटरैक्शन को अपने-आप मैनेज करता है.

KMLLoader हैंडलिंग: @loaders.gl/kml मॉड्यूल का इस्तेमाल करके, ज्यामिति और प्रॉपर्टी को ऐसे फ़ॉर्मैट में पार्स किया जाता है जिसका इस्तेमाल deck.gl, इंटरैक्शन इवेंट को नेटिव तौर पर ट्रिगर करने के लिए करता है.
सुविधा पर क्लिक: किसी सुविधा पर क्लिक करने पर, deck.gl इवेंट को कैप्चर कर सकता है. साथ ही, उससे जुड़ा मेटाडेटा (जैसे कि <name> या <description>) दिखा सकता है.
उदाहरण: deckgl-kml-updated सैंपल में, रीयल-टाइम KML रेंडरिंग दिखाई गई है. इसमें भूकंप के मार्कर पर कर्सर घुमाने से, इवेंट की पूरी जानकारी दिखती है.

2. geoxml3 की मदद से इंटरैक्टिव डेटा

geoxml3 KML को ब्राउज़र में स्थानीय तौर पर पार्स करता है, स्टाइल की जानकारी निकालता है, और Google Maps API के स्टैंडर्ड ऑब्जेक्ट जनरेट करता है. ये ऑब्जेक्ट इंटरैक्टिव बने रहते हैं.

नेटिव स्टाइल एक्सट्रैक्शन: लाइब्रेरी, KML से <Style> और <StyleMap> एलिमेंट लेती है, ताकि उन्हें जनरेट किए गए मार्कर, पॉलीलाइन, और पॉलीगॉन पर लागू किया जा सके.
क्लिक हैंडलर: डिफ़ॉल्ट रूप से, geoxml3 इन ऑब्जेक्ट के लिए क्लिक हैंडलर उपलब्ध कराता है. पार्सर इंस्टैंटिएशन के दौरान, कस्टम कॉलबैक फ़ंक्शन (createMarker, createOverlay) भी तय किए जा सकते हैं. इससे, अपने हिसाब से चुनने का लॉजिक या साइडबार अपडेट लागू किए जा सकते हैं.
उदाहरण: इस उदाहरण में बताया गया है कि KML को रेंडर करने के लिए geoxml3 का इस्तेमाल कैसे किया जाता है. इसमें पसंद के मुताबिक बनाने की सुविधा भी शामिल है. जैसे, इंटरैक्शन वाले सर्कल मार्कर. मार्कर पर क्लिक करके भूकंप की जानकारी दिखाई जा सकती है.
इस्तेमाल का पैटर्न:

var myParser = new geoXML3.parser({
  map: map,
  processStyles: true, // Automatically handle KML styles
  afterParse: function(doc) {
    // Code to run after the KML is fully parsed
  }
});
myParser.parse('interactive_data.kml');

इमेज वाली KML फ़ाइल

KmlLayer का इस्तेमाल करके इमेज दिखाने वाले डेवलपर के लिए यह गाइड है. जैसे, सैटेलाइट से मिले डेटा वाले मैप, मौसम के पैटर्न या ऐतिहासिक ब्लूप्रिंट. इसमें GroundOverlays या तीसरे पक्ष के पार्सर पर माइग्रेट करने के तरीके बताए गए हैं.

माइग्रेशन का सुझाव: Maps JavaScript API GroundOverlay

इमेज माइग्रेट करने के लिए, हमारा सुझाव है कि आप google.maps.GroundOverlay क्लास का इस्तेमाल करें. इसकी मदद से, मैप पर किसी इमेज को सीधे तौर पर अपने कोड में, किसी खास भौगोलिक निर्देशांक पर रखा जा सकता है.

1. लागू करना

सीमाएं तय करने के लिए, KML फ़ाइल पर भरोसा करने के बजाय, इमेज का यूआरएल और मैप पर आयत को दिखाने वाला LatLngBounds ऑब्जेक्ट तय करें.

दस्तावेज़: ग्राउंड ओवरले गाइड.
इमेज तैयार करना: अगर आपकी इमेज को जियोरेफ़रंस किया गया है, लेकिन वह सही प्रोजेक्शन (EPSG:4326) में नहीं है, तो ओपन-सोर्स टूल gdalwarp का इस्तेमाल करके इमेज को Maps JS API के साथ इस्तेमाल करने के लिए, उसे बदला जा सकता है.

gdalwarp -t_srs EPSG:4326 image.jp2 image.jpg

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करना

अगर आपके वर्कफ़्लो के लिए, डेटा को KML फ़ॉर्मैट में रखना ज़रूरी है, तो इमेज ओवरले रेंडर करने के लिए, geoxml3 या deck.gl जैसी तीसरे पक्ष की लाइब्रेरी का इस्तेमाल किया जा सकता है.

डिसक्लेमर: Google, तीसरे पक्ष के इन समाधानों के लिए सहायता उपलब्ध नहीं कराता. हालांकि, इनकी जांच की जा चुकी है और ये ज़्यादातर इस्तेमाल के मामलों में काम करते हैं.

1. geoxml3

geoxml3, ब्राउज़र में स्थानीय तौर पर सामान्य GroundOverlay एलिमेंट को पार्स करने और उन्हें Google Maps API ऑब्जेक्ट में बदलने के लिए एक अच्छा विकल्प है.

इस्तेमाल का उदाहरण:

const geoXmlParser = new geoXML3.parser({
    map: map,
    afterParse: function(doc) {
        console.log("Parsing complete. Number of documents: " + doc.length);
        const bounds = doc[0].gbounds;
        if (bounds && !bounds.isEmpty()) {
           map.fitBounds(bounds);
        }
    },
    createOverlay: function(groundOverlayData) {
        // Extract bounds and URL from parsed KML data
        const imageUrl = groundOverlayData.icon.href;
        const imageBounds = {
            north: parseFloat(groundOverlayData.latLonBox.north),
            south: parseFloat(groundOverlayData.latLonBox.south),
            east: parseFloat(groundOverlayData.latLonBox.east),
            west: parseFloat(groundOverlayData.latLonBox.west)
        };

        // Create the Google Maps GroundOverlay
        const nativeOverlay = new google.maps.GroundOverlay(imageUrl, imageBounds);
        nativeOverlay.setMap(map);
    }
});
geoXmlParser.parse('your_file.kml');

2. deck.gl

deck.gl का स्टैंडर्ड GeoJsonLayer, वेक्टर डेटा को मैनेज करता है. हालांकि, यह BitmapLayer का इस्तेमाल करके, मैन्युअल तरीके से लागू किए गए GroundOverlays को भी सपोर्ट कर सकता है.

इस तरीके में, फ़ाइल को पार्स करने के लिए KMLLoader का इस्तेमाल किया जाता है. इसके बाद, KML डेटा से निकाले गए इमेज यूआरएल और निर्देशांकों के साथ BitmapLayer को साफ़ तौर पर तय किया जाता है.

ज़रूरी शर्तें: deck.gl का इस्तेमाल करने के लिए, वेक्टर मैप टाइप का होना ज़रूरी है.
दस्तावेज़: deck.gl Bitmap Layer

ऐडवांस केस: gdal2tiles का इस्तेमाल करके टाइल पिरामिड बनाना

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

टूल: gdal2tiles, KMZ पिरामिड से डेटा निकाल सकता है. साथ ही, टाइलें दिखाने के लिए Maps JavaScript API का स्टैंडर्ड कोड जनरेट कर सकता है. ध्यान दें कि मौजूदा मैप में शामिल करने के लिए, आखिरी नतीजे में मैन्युअल तरीके से बदलाव करना पड़ सकता है.

gdal2tiles -z 10- -n -u https://yourhost.com/tiles/ -w google input.kmz

नेटवर्क लिंक वाली KML फ़ाइल

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

सहायता देने वाला समाधान: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग (डीडीएस)

Google Maps Platform के डेटासेट, <NetworkLink> एलिमेंट को नेटिव तौर पर पार्स नहीं करते हैं. इसलिए, आपको अपने डेटा स्ट्रक्चर के आधार पर माइग्रेशन की रणनीति चुननी होगी:

रणनीति A: अलग-अलग डेटासेट (उपयोगकर्ता के कंट्रोल वाली लेयर के लिए सबसे सही) Google Cloud Console में, हर उस KML फ़ाइल को अलग-अलग डेटासेट के तौर पर अपलोड करें जो पहले नेटवर्क लिंक थी. इसके बाद, JavaScript का इस्तेमाल करके, इन लेयर को ज़रूरत के हिसाब से डाइनैमिक तरीके से लोड और दिखाया जा सकता है. इसके लिए, map.getDatasetFeatureLayer(datasetId) को कॉल करें और इसकी दिखने की सेटिंग या स्टाइल में बदलाव करें.
रणनीति B: फ़्लैट की गई KML फ़ाइल (बेहतर परफ़ॉर्मेंस वाले डिसप्ले के लिए सबसे सही) डेटासेट के तौर पर अपलोड करने से पहले, नेटवर्क से लिंक की गई अपनी अलग-अलग फ़ाइलों की सभी सुविधाओं को एक ही, पूरी जानकारी वाली KML फ़ाइल में मिलाएं. इसके बाद, सुविधा के एट्रिब्यूट के आधार पर डाइनैमिक स्टाइलिंग का इस्तेमाल करके, डेटा के खास सबसेट को तुरंत फ़िल्टर और दिखाया जा सकता है.

डाइनैमिक डेटा अपडेट करना: नेटवर्क लिंक के "अपने-आप रीफ़्रेश होने" के व्यवहार को कॉपी करने के लिए, Datasets API का इस्तेमाल करें. इससे, सोर्स डेटा में बदलाव होने पर, आपके डेटासेट का नया वर्शन प्रोग्राम के हिसाब से अपलोड हो जाएगा.

ओपन सोर्स समाधान: deck.gl और geoxml3

deck.gl और geoxml3, दोनों ही KML <NetworkLink> एलिमेंट को पार्स करने और अपने-आप फ़ेच करने के लिए बेहतर सपोर्ट नहीं देते हैं.

deck.gl

deck.gl KMLLoader का इस्तेमाल करता है, जो togeojson पर बनाया गया है. इसमें साफ़ तौर पर NetworkLinks का इस्तेमाल नहीं किया जा सकता.

यह एक अच्छा समाधान क्यों नहीं है: पार्सर को एसिंक्रोनस, "बिना किसी परेशानी वाला" कन्वर्टर बनाने के लिए डिज़ाइन किया गया है. यह विश्वसनीयता और आसानी को बनाए रखने के लिए, अपने नेटवर्क अनुरोध नहीं करता है. अगर आपका ऐप्लिकेशन, ऐसी KML फ़ाइलों पर निर्भर करता है जो कई अन्य यूआरएल पर ले जाती हैं, तो deck.gl उन्हें अपने-आप हल नहीं करेगा.

geoxml3

geoxml3 को Maps JS API के लिए केएमएल पार्स करने के लिए बनाया गया था. हालांकि, नेटवर्क लिंक के लिए इसका इस्तेमाल एक्सपेरिमेंट के तौर पर किया जा रहा है और इसे अपडेट नहीं किया जाता.

यह एक अच्छा समाधान क्यों नहीं है: यह सुविधा, सिर्फ़ "network_link" की किसी खास शाखा में मौजूद है. यह शाखा पुरानी है और इसकी अच्छी तरह से जांच नहीं की गई है. हमारा सुझाव है कि प्रोडक्शन डेटा माइग्रेशन के लिए इसका इस्तेमाल न करें. ऐसा इसलिए, क्योंकि यह जटिल लिंक स्ट्रक्चर या सीओआरएस जैसी आधुनिक सुरक्षा से जुड़ी ज़रूरी शर्तों को पूरा नहीं कर सकता.

सुझावों की खास जानकारी

भरोसेमंद माइग्रेशन के लिए, डेवलपर को नेटवर्क लिंक वाली फ़ाइलों के लिए तीसरे पक्ष के पार्सर का इस्तेमाल नहीं करना चाहिए. इसके बजाय, उन्हें Datasets API का इस्तेमाल करके, डेटा फ़ेच करने की लॉजिक को फिर से बनाना चाहिए. इससे यह पक्का होता है कि आपका डेटा, Google Maps Platform के इंफ़्रास्ट्रक्चर में सुरक्षित तरीके से मैनेज किया जाता है. इसके लिए, क्लाइंट-साइड के ऐसे पार्सर का इस्तेमाल नहीं किया जाता जिन्हें अपडेट नहीं किया जाता.

स्क्रीन ओवरले दिखाने के लिए KML का इस्तेमाल करना

KmlLayer से डेटा-ड्रिवन स्टाइलिंग (डीडीएस) जैसे आधुनिक विकल्पों पर माइग्रेट करने वाले डेवलपर के लिए, यह ध्यान रखना ज़रूरी है कि डेटासेट में स्क्रीन ओवरले काम नहीं करते. मैप के ऊपर फ़िक्स की गई इमेज, लोगो या लेजेंड दिखाने के लिए, आपको Maps JavaScript API का इस्तेमाल करके कस्टम कंट्रोल बनाने होंगे.

1. अपनी KML फ़ाइल में क्या-क्या देखना चाहिए

इसी तरह का कस्टम कंट्रोल बनाने के लिए, अपनी KML फ़ाइल में मौजूद <ScreenOverlay> एलिमेंट में यहां दी गई मुख्य एट्रिब्यूट की जांच करें:

<Icon><href>: यह उस इमेज का यूआरएल होता है जिसे आपको दिखाना है.
<screenXY>: इससे यह तय होता है कि स्क्रीन पर ओवरले कहां दिखेगा.
- x=0, y=1 (फ़्रैक्शन), ऊपर बाईं ओर के अलाइनमेंट से मेल खाता है.
- x=1, y=1, सबसे ऊपर दाईं ओर से मेल खाता है.
- x=0, y=0, सबसे नीचे बाईं ओर से मेल खाता है.
- x=1, y=0, सबसे नीचे दाईं ओर से मेल खाता है.
<size>: इससे ओवरले की चौड़ाई और लंबाई तय होती है.
<rotation>: इससे पता चलता है कि इमेज को घुमाना है या नहीं.

2. लागू करना: कस्टम कंट्रोल बनाना

कस्टम कंट्रोल, असल में एक स्टैंडर्ड एचटीएमएल एलिमेंट होता है. जैसे, <div> या <img>. इसे मैप की पहले से तय की गई किसी एक जगह पर "पुश" किया जाता है.

KML फ़ाइल में मौजूद पोज़िशन को `ControlPosition` पर मैप करना

Maps JavaScript API, कंट्रोल को ऐंकर करने के लिए ControlPosition enum का इस्तेमाल करता है. नीचे दी गई टेबल का इस्तेमाल करके, अपने KML <screenXY> को JS API के सही कॉन्स्टेंट के साथ मैप करें:

केएमएल फ़ाइल में मौजूद जगह की जानकारी (`screenXY`)	JS API `ControlPosition`
सबसे ऊपर बाईं ओर (`x:0, y:1`)	`TOP_LEFT` (लेगसी) या `BLOCK_START_INLINE_START` (लॉजिकल)
सबसे ऊपर दाईं ओर (`x:1, y:1`)	`TOP_RIGHT` या `BLOCK_START_INLINE_END`
सबसे नीचे बाईं ओर (`x:0, y:0`)	`BOTTOM_LEFT` या `BLOCK_END_INLINE_START`
सबसे नीचे दाईं ओर (`x:1, y:0`)	`BOTTOM_RIGHT` या `BLOCK_END_INLINE_END`

3. माइग्रेशन का उदाहरण: लोगो का फ़िक्स्ड ओवरले

यहां दिया गया उदाहरण, मैप के ऊपर दाएं कोने में मौजूद KML ScreenOverlay लोगो की तरह दिखता है.

सीएसएस स्टाइलिंग

सीएसएस का इस्तेमाल करके, "ओवरले" का साइज़ और लुक तय करें.

#logo-control {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#logo-control img {
  width: 150px; /* Equivalent to KML <size> */
  display: block;
}

JavaScript लागू करना

एलिमेंट को map.controls ऐरे में जोड़ें.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 41.85, lng: -87.65 },
  });

  // 1. Create the container for the overlay
  const logoControlDiv = document.createElement("div");
  logoControlDiv.id = "logo-control";

  // 2. Create the image (KML <Icon>)
  const logoImage = document.createElement("img");
  logoImage.src = "https://example.com/logo.png";
  logoImage.alt = "Company Logo";

  logoControlDiv.appendChild(logoImage);

  // 3. Position the control (KML <screenXY>)
  // In this case, we use TOP_RIGHT
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(logoControlDiv);
}

परिचय

सीमा/बॉर्डर/दिलचस्पी के इलाके की जानकारी को स्टाइल करने के लिए KML फ़ाइल

माइग्रेशन का सुझाव: सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग

उपलब्ध FeatureType

किसी इलाके को हाइलाइट करने का तरीका

पैन करने की सुविधा को किसी जगह तक सीमित करना

माइग्रेशन की खास जानकारी को लागू करना

वेक्टर डेटा वाली KML फ़ाइल (पॉइंट/पॉलीलाइन/सीमाएं/पॉलीगॉन)

माइग्रेशन का सुझाव: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग

1. सेटअप करना और अपलोड करना

2. व्यूपोर्ट को डेटा पर सेट करना

3. सुविधा के एट्रिब्यूट से स्टाइलिंग करना

उदाहरण: एट्रिब्यूट का इस्तेमाल करके स्टाइलिंग फ़ंक्शन

माइग्रेशन का सुझाव: GeoJSON के साथ क्लाइंट-साइड रेंडरिंग

1. KML को GeoJSON में बदलना

2. व्यूपोर्ट को डेटा पर सेट करना

3. सुविधा के एट्रिब्यूट से स्टाइलिंग करना

उदाहरण: स्टाइलिंग फ़ंक्शन और व्यूपोर्ट अडजस्टमेंट

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी के साथ क्लाइंट-साइड रेंडरिंग

1. deck.gl

2. geoxml3

इंटरैक्टिव एलिमेंट वाली KML फ़ाइल

माइग्रेशन का सुझाव: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग

शुरुआती सेटअप

1. इंटरैक्शन इवेंट हैंडल करना

2. डाइनैमिक स्टाइलिंग (होवर इफ़ेक्ट)

3. description एट्रिब्यूट से एचटीएमएल दिखाना

4. ExtendedData की मदद से पसंद के मुताबिक InfoWindow बनाना

माइग्रेशन का सुझाव: GeoJSON के साथ क्लाइंट-साइड रेंडरिंग

शुरुआती सेटअप

1. ऑटोमैटिक और मैन्युअल इंटरैक्शन

2. इंटरैक्शन इवेंट हैंडल करना

3. InfoWindow में एचटीएमएल के ब्यौरे दिखाना

4. कस्टम InfoWindows और ExtendedData

5. डाइनैमिक स्टाइलिंग (होवर इफ़ेक्ट)

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी के साथ क्लाइंट-साइड रेंडरिंग

शुरुआती सेटअप

1. deck.gl की मदद से इंटरैक्टिव डेटा

2. geoxml3 की मदद से इंटरैक्टिव डेटा

इमेज वाली KML फ़ाइल

माइग्रेशन का सुझाव: Maps JavaScript API GroundOverlay

1. लागू करना

माइग्रेशन का तरीका: तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करना

1. geoxml3

2. deck.gl

ऐडवांस केस: gdal2tiles का इस्तेमाल करके टाइल पिरामिड बनाना

नेटवर्क लिंक वाली KML फ़ाइल

सहायता देने वाला समाधान: डेटासेट के लिए डेटा-ड्रिवन स्टाइलिंग (डीडीएस)

ओपन सोर्स समाधान: deck.gl और geoxml3

deck.gl

geoxml3

सुझावों की खास जानकारी

स्क्रीन ओवरले दिखाने के लिए KML का इस्तेमाल करना

1. अपनी KML फ़ाइल में क्या-क्या देखना चाहिए

2. लागू करना: कस्टम कंट्रोल बनाना

KML फ़ाइल में मौजूद पोज़िशन को ControlPosition पर मैप करना

3. माइग्रेशन का उदाहरण: लोगो का फ़िक्स्ड ओवरले

सीएसएस स्टाइलिंग

JavaScript लागू करना

ज़्यादा जानकारी

3. `description` एट्रिब्यूट से एचटीएमएल दिखाना

4. `ExtendedData` की मदद से पसंद के मुताबिक InfoWindow बनाना

4. कस्टम InfoWindows और `ExtendedData`

KML फ़ाइल में मौजूद पोज़िशन को `ControlPosition` पर मैप करना