मैप और जियोकोडर लाइब्रेरी के लिए JavaScript ड्रॉप-इन

इस पेज पर

• Google Maps का JavaScript API
• Bing Maps V8 वेब कंट्रोल
• Mapbox GL JS और mapbox-gl-geocoder
• Leaflet जियोकोडर प्लगइन
• JavaScript के लिए HERE Maps API
• MapQuest.js
• मैप टाइल्स और स्टाइल
• ब्राउज़र में कुंजियाँ

Google Maps का JavaScript API

maps लाइब्रेरी को maps.googleapis.com के बजाय gapi.mygeocode.com से लोड करें। google.maps नेमस्पेस उपलब्ध है, और मैप टाइल्स, मार्कर, Geocoder, Places Autocomplete और ElevationService हमारी ओर से दिए जाते हैं। मैप लोड आपके कोटे में नहीं गिने जाते।

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&libraries=places&callback=initMap">
</script>

<script async defer
  src="https://gapi.mygeocode.com/maps/api/js?key=YOUR_MYGEOCODE_KEY&libraries=places&callback=initMap">
</script>

// Nothing below this line changes.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 51.5074, lng: -0.1278 },
    zoom: 12
  });

  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "221B Baker Street, London" }, (results, status) => {
    if (status === "OK") {
      map.setCenter(results[0].geometry.location);
      new google.maps.Marker({ map, position: results[0].geometry.location });
    }
  });

  const input = document.getElementById("search");
  const autocomplete = new google.maps.places.Autocomplete(input, { fields: ["geometry", "formatted_address"] });
  autocomplete.addListener("place_changed", () => {
    const place = autocomplete.getPlace();
    if (place.geometry) map.panTo(place.geometry.location);
  });
}

अनुरोध किसे गिना जाता है। मैप लोड और टाइल अनुरोध मुफ़्त हैं। हर Geocoder कॉल, हर Autocomplete सेशन और हर ElevationService कॉल एक अनुरोध गिनी जाती है।

Bing Maps V8 वेब कंट्रोल

V8 कंट्रोल, Bing Maps for Enterprise के बाकी हिस्से के साथ बंद हो रहा है। कंट्रोल को bing.mygeocode.com से लोड करें और Microsoft.Maps नेमस्पेस काम करता रहता है, पीछे हमारी टाइल्स, जियोकोडिंग और autosuggest के साथ।

<script async defer
  src="https://www.bing.com/api/maps/mapcontrol?key=YOUR_BING_KEY&callback=loadMap">
</script>

<script async defer
  src="https://bing.mygeocode.com/api/maps/mapcontrol?key=YOUR_MYGEOCODE_KEY&callback=loadMap">
</script>

function loadMap() {
  const map = new Microsoft.Maps.Map("#map", { center: new Microsoft.Maps.Location(47.6396, -122.13), zoom: 12 });

  Microsoft.Maps.loadModule("Microsoft.Maps.Search", () => {
    const search = new Microsoft.Maps.Search.SearchManager(map);
    search.geocode({
      where: "1 Microsoft Way, Redmond, WA",
      callback: (result) => {
        const loc = result.results[0].location;
        map.setView({ center: loc, zoom: 15 });
        map.entities.push(new Microsoft.Maps.Pushpin(loc));
      }
    });
  });
}

अनुरोध किसे गिना जाता है। मैप लोड और टाइल्स मुफ़्त हैं। हर geocode, reverseGeocode और हर autosuggest सेशन एक अनुरोध गिना जाता है।

Mapbox GL JS और mapbox-gl-geocoder

अपना मैप कोड रखें और दो URL बदलें: स्टाइल, और जियोकोडर का origin। MapLibre GL JS (ओपन सोर्स फ़ोर्क) सुझाया गया रेंडरर है; Mapbox GL JS v1 भी काम करता है। mapbox-gl-geocoder में एक origin विकल्प है, इसलिए जियोकोडर कंट्रोल में इसके अलावा कोई कोड बदलाव नहीं करना पड़ता।

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  accessToken: "YOUR_MAPBOX_TOKEN"
});
map.addControl(new MapboxGeocoder({
  accessToken: "YOUR_MAPBOX_TOKEN",
  mapboxgl: mapboxgl
}));

const map = new maplibregl.Map({
  container: "map",
  style: "https://mapbox.mygeocode.com/styles/v1/mygeocode/streets?access_token=YOUR_MYGEOCODE_KEY"
});
map.addControl(new MapboxGeocoder({
  accessToken: "YOUR_MYGEOCODE_KEY",
  origin: "https://mapbox.mygeocode.com",
  mapboxgl: maplibregl
}));

// Direct calls keep the same shape too
const res = await fetch(
  "https://mapbox.mygeocode.com/geocoding/v5/mapbox.places/Oxford%20Street%20London.json?access_token=YOUR_MYGEOCODE_KEY",
  { headers: { "X-API-Key": "YOUR_KEY" } }
);
const { features } = await res.json();
map.flyTo({ center: features[0].center, zoom: 15 });

अनुरोध किसे गिना जाता है। टाइल्स और स्टैटिक इमेज मुफ़्त हैं। हर जियोकोडर अनुरोध एक अनुरोध गिना जाता है; ऑटोकम्प्लीट के कीस्ट्रोक को कंट्रोल हमेशा की तरह debounce करता है।

Leaflet जियोकोडर प्लगइन

Leaflet प्लगइन के ज़रिए जियोकोडर से बात करता है, और लोकप्रिय प्लगइन एक सर्विस URL स्वीकार करते हैं। Leaflet Control Geocoder या leaflet-geosearch को osm.mygeocode.com की ओर मोड़ें और बेस मैप के लिए हमारी टाइल्स इस्तेमाल करें।

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "© OpenStreetMap contributors"
}).addTo(map);

L.Control.geocoder({
  geocoder: L.Control.Geocoder.nominatim()
}).addTo(map);

L.tileLayer("https://tiles.mygeocode.com/streets/{z}/{x}/{y}.png?key=YOUR_MYGEOCODE_KEY", {
  attribution: "© My Geocode"
}).addTo(map);

L.Control.geocoder({
  geocoder: L.Control.Geocoder.nominatim({
    serviceUrl: "https://osm.mygeocode.com/",
    geocodingQueryParams: { key: "YOUR_MYGEOCODE_KEY" }
  })
}).addTo(map);

// leaflet-geosearch works the same way
import { OpenStreetMapProvider, GeoSearchControl } from "leaflet-geosearch";

const provider = new OpenStreetMapProvider({
  searchUrl: "https://osm.mygeocode.com/search",
  reverseUrl: "https://osm.mygeocode.com/reverse",
  params: { key: "YOUR_MYGEOCODE_KEY", addressdetails: 1 }
});
map.addControl(new GeoSearchControl({ provider, style: "bar" }));

अनुरोध किसे गिना जाता है। टाइल्स मुफ़्त हैं। हर geocode और हर reverse geocode एक अनुरोध गिना जाता है।

JavaScript के लिए HERE Maps API

mapsjs बंडल here.mygeocode.com से लोड करें और platform हमेशा की तरह बनाएँ। H.Map, H.service.Platform और search सर्विस के सिग्नेचर वही रहते हैं, वेक्टर टाइल्स और जियोकोडिंग हमारी ओर से।

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

<script src="https://here.mygeocode.com/v3/3.1/mapsjs-core.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-service.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-ui.js"></script>
<script src="https://here.mygeocode.com/v3/3.1/mapsjs-mapevents.js"></script>

const platform = new H.service.Platform({ apikey: "YOUR_MYGEOCODE_KEY" });
const layers = platform.createDefaultLayers();
const map = new H.Map(document.getElementById("map"), layers.vector.normal.map, {
  center: { lat: 52.5304, lng: 13.3853 }, zoom: 13
});

platform.getSearchService().geocode(
  { q: "Invalidenstraße 116, Berlin" },
  (result) => {
    const { position } = result.items[0];
    map.setCenter(position);
    map.addObject(new H.map.Marker(position));
  },
  (err) => console.error(err)
);

अनुरोध किसे गिना जाता है। मैप लोड और टाइल्स मुफ़्त हैं। हर geocode, reverseGeocode और autosuggest कॉल एक अनुरोध गिनी जाती है।

MapQuest.js

MapQuest.js, Leaflet को रैप करता है और L.mapquest.geocoding() जोड़ता है। बंडल mapquest.mygeocode.com से लोड करें और अपनी कुंजी पहले की तरह सेट करें।

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

<script src="https://mapquest.mygeocode.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://mapquest.mygeocode.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

L.mapquest.key = "YOUR_MYGEOCODE_KEY";

const map = L.mapquest.map("map", {
  center: [41.8789, -87.6359],
  layers: L.mapquest.tileLayer("map"),
  zoom: 12
});

L.mapquest.geocoding().geocode("233 S Wacker Dr, Chicago, IL", (err, response) => {
  const loc = response.results[0].locations[0].latLng;
  map.setView(loc, 15);
  L.marker(loc, { icon: L.mapquest.icons.marker() }).addTo(map);
});

अनुरोध किसे गिना जाता है। टाइल्स मुफ़्त हैं। हर geocode, reverse और search-ahead अनुरोध एक अनुरोध गिना जाता है।

मैप टाइल्स और स्टाइल

ऊपर दिया हर लोडर एक ही टाइल सर्विस इस्तेमाल करता है, जिसे आप किसी भी लाइब्रेरी से सीधे भी इस्तेमाल कर सकते हैं।

स्टाइल हैं streets, light, dark, outdoors और satellite। टाइल ट्रैफ़िक का बिल नहीं बनता और उसके लिए किसी कुंजी की ज़रूरत नहीं। हमारी टाइल्स OpenStreetMap डेटा और हमारे अपने डेटा से रेंडर की जाती हैं; एट्रिब्यूशन कंट्रोल में © OpenStreetMap contributors और My Geocode दिखना ज़रूरी है, जिसे ऊपर दिए लोडर आपके लिए जोड़ देते हैं।

ब्राउज़र में कुंजियाँ

मैप टाइल्स, स्टाइल और ऊपर दिए लाइब्रेरी लोडर को किसी कुंजी की ज़रूरत नहीं, इसलिए मैप खुद हमेशा काम करता है। लाइब्रेरी जो जियोकोडिंग, ऑटोकम्प्लीट और ऊँचाई कॉल करती हैं, उन्हें अपने सर्वर के ज़रिए भेजें: लोडर एक proxy पैरामीटर (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) स्वीकार करते हैं और वे कॉल वहाँ भेजते हैं; आपका सर्वर कुंजी जोड़ता है और अनुरोध हमें आगे भेजता है। तब ऊपर दिए YOUR_MYGEOCODE_KEY प्लेसहोल्डर खाली छोड़ दिए जाते हैं।

• आपका प्रॉक्सी कैशिंग और अपनी सीमाएँ जोड़ सकता है, जो ब्राउज़र नहीं कर सकते।
• तब अनुरोध आपके सर्वर के पते से आते हैं, इसलिए एक कुंजी कितने भी विज़िटर को कवर करती है।