JavaScript-Drop-ins für Karten- und Geocoder-Bibliotheken

Auf dieser Seite

• Google Maps JavaScript API
• Bing Maps V8 Web Control
• Mapbox GL JS und mapbox-gl-geocoder
• Leaflet-Geocoder-Plugins
• HERE Maps API für JavaScript
• MapQuest.js
• Kartenkacheln und Stile
• Schlüssel im Browser

Google Maps JavaScript API

Laden Sie die Kartenbibliothek von gapi.mygeocode.com statt von maps.googleapis.com. Der Namespace google.maps wird bereitgestellt, wobei Kartenkacheln, Marker, der Geocoder, Places Autocomplete und der ElevationService von uns ausgeliefert werden. Kartenaufrufe zählen nicht zu Ihrem Kontingent.

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

Was als Anfrage zählt. Kartenaufrufe und Kachelanfragen sind kostenlos. Jeder Geocoder-Aufruf, jede Autocomplete-Sitzung und jeder ElevationService-Aufruf zählt als eine Anfrage.

Bing Maps V8 Web Control

Das V8 Control wird zusammen mit dem Rest von Bing Maps for Enterprise eingestellt. Laden Sie das Control von bing.mygeocode.com, und der Namespace Microsoft.Maps funktioniert weiter, mit unseren Kacheln, unserer Geokodierung und unserem Autosuggest dahinter.

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

Was als Anfrage zählt. Kartenaufrufe und Kacheln sind kostenlos. Jedes geocode, jedes reverseGeocode und jede Autosuggest-Sitzung zählt als eine Anfrage.

Mapbox GL JS und mapbox-gl-geocoder

Behalten Sie Ihren Kartencode und tauschen Sie die beiden URLs aus: den Stil und den Geocoder-Ursprung. MapLibre GL JS (der Open-Source-Fork) ist der empfohlene Renderer; Mapbox GL JS v1 funktioniert ebenfalls. mapbox-gl-geocoder hat eine origin-Option, daher braucht das Geocoder-Control darüber hinaus keine Codeänderungen.

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

Was als Anfrage zählt. Kacheln und statische Bilder sind kostenlos. Jede Geocoder-Anfrage zählt als eine Anfrage; die Tastenanschläge der Autovervollständigung werden wie üblich vom Control gebündelt (Debouncing).

Leaflet-Geocoder-Plugins

Leaflet spricht über Plugins mit Geocodern, und die beliebten Plugins akzeptieren eine Service-URL. Richten Sie Leaflet Control Geocoder oder leaflet-geosearch auf osm.mygeocode.com aus und verwenden Sie unsere Kacheln für die Basiskarte.

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" }));

Was als Anfrage zählt. Kacheln sind kostenlos. Jede Geokodierung und jede Reverse-Geokodierung zählt als eine Anfrage.

HERE Maps API für JavaScript

Laden Sie die mapsjs-Bundles von here.mygeocode.com und erstellen Sie die Plattform wie gewohnt. H.Map, H.service.Platform und der Suchdienst behalten ihre Signaturen, mit Vektorkacheln und Geokodierung von uns.

<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)
);

Was als Anfrage zählt. Kartenaufrufe und Kacheln sind kostenlos. Jeder Aufruf von geocode, reverseGeocode und autosuggest zählt als eine Anfrage.

MapQuest.js

MapQuest.js baut auf Leaflet auf und ergänzt L.mapquest.geocoding(). Laden Sie das Bundle von mapquest.mygeocode.com und setzen Sie Ihren Schlüssel wie bisher.

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

Was als Anfrage zählt. Kacheln sind kostenlos. Jede geocode-, reverse- und search-ahead-Anfrage zählt als eine Anfrage.

Kartenkacheln und Stile

Alle oben genannten Loader nutzen denselben Kacheldienst, den Sie auch direkt aus jeder Bibliothek verwenden können.

Die Stile sind streets, light, dark, outdoors und satellite. Kachelverkehr wird nicht berechnet und braucht keinen Schlüssel. Unsere Kacheln werden aus OpenStreetMap-Daten und unseren eigenen gerendert; das Attributions-Control muss © OpenStreetMap contributors und My Geocode anzeigen, was die oben genannten Loader für Sie ergänzen.

Schlüssel im Browser

Kartenkacheln, Stile und die oben genannten Bibliotheks-Loader brauchen überhaupt keinen Schlüssel, sodass die Karte selbst immer funktioniert. Die Aufrufe für Geokodierung, Autovervollständigung und Höhendaten, die die Bibliotheken ausführen, leiten Sie über Ihren eigenen Server: Die Loader akzeptieren einen Parameter proxy (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) und senden diese Aufrufe dorthin; Ihr Server ergänzt den Schlüssel und leitet die Anfrage an uns weiter. Die Platzhalter YOUR_MYGEOCODE_KEY oben bleiben dann leer.

• Ihr Proxy kann Caching und eigene Limits ergänzen, was Browser nicht können.
• Anfragen kommen dann von der Adresse Ihres Servers, sodass ein Schlüssel beliebig viele Besucher abdeckt.