Remplacements compatibles JavaScript pour les bibliothèques de cartes et de géocodage

Sur cette page

• Google Maps JavaScript API
• Bing Maps V8 Web Control
• Mapbox GL JS et mapbox-gl-geocoder
• Plugins de géocodage Leaflet
• HERE Maps API for JavaScript
• MapQuest.js
• Tuiles et styles de carte
• Les clés dans le navigateur

Google Maps JavaScript API

Chargez la bibliothèque de cartes depuis gapi.mygeocode.com au lieu de maps.googleapis.com. L'espace de noms google.maps est fourni, avec les tuiles de carte, les marqueurs, le Geocoder, Places Autocomplete et l'ElevationService servis par nous. Les chargements de carte ne sont pas décomptés de votre quota.

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

Ce qui compte comme une requête. Les chargements de carte et les requêtes de tuiles sont gratuits. Chaque appel au Geocoder, chaque session Autocomplete et chaque appel à l'ElevationService compte pour une requête.

Bing Maps V8 Web Control

Le contrôle V8 est retiré en même temps que le reste de Bing Maps for Enterprise. Chargez le contrôle depuis bing.mygeocode.com et l'espace de noms Microsoft.Maps continue de fonctionner, avec nos tuiles, notre géocodage et notre autosuggestion derrière.

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

Ce qui compte comme une requête. Les chargements de carte et les tuiles sont gratuits. Chaque geocode, chaque reverseGeocode et chaque session d'autosuggestion compte pour une requête.

Mapbox GL JS et mapbox-gl-geocoder

Conservez votre code de carte et remplacez les deux URL : le style et l'origine du géocodeur. MapLibre GL JS (le fork open source) est le moteur de rendu recommandé ; Mapbox GL JS v1 fonctionne aussi. mapbox-gl-geocoder dispose d'une option origin, le contrôle de géocodage ne nécessite donc aucune autre modification de code.

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

Ce qui compte comme une requête. Les tuiles et les images statiques sont gratuites. Chaque requête du géocodeur compte pour une requête ; les frappes de la saisie semi-automatique sont temporisées par le contrôle, comme d'habitude.

Plugins de géocodage Leaflet

Leaflet communique avec les géocodeurs par l'intermédiaire de plugins, et les plus populaires acceptent une URL de service. Pointez Leaflet Control Geocoder ou leaflet-geosearch vers osm.mygeocode.com et utilisez nos tuiles pour le fond de carte.

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

Ce qui compte comme une requête. Les tuiles sont gratuites. Chaque géocodage et chaque géocodage inverse compte pour une requête.

HERE Maps API for JavaScript

Chargez les bundles mapsjs depuis here.mygeocode.com et créez la plateforme comme d'habitude. H.Map, H.service.Platform et le service de recherche conservent leurs signatures, avec les tuiles vectorielles et le géocodage fournis par nous.

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

Ce qui compte comme une requête. Les chargements de carte et les tuiles sont gratuits. Chaque appel geocode, reverseGeocode et autosuggest compte pour une requête.

MapQuest.js

MapQuest.js encapsule Leaflet et ajoute L.mapquest.geocoding(). Chargez le bundle depuis mapquest.mygeocode.com et définissez votre clé comme avant.

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

Ce qui compte comme une requête. Les tuiles sont gratuites. Chaque requête geocode, reverse et search-ahead compte pour une requête.

Tuiles et styles de carte

Tous les chargeurs ci-dessus utilisent le même service de tuiles, que vous pouvez aussi utiliser directement depuis n'importe quelle bibliothèque.

Les styles sont streets, light, dark, outdoors et satellite. Le trafic de tuiles n'est pas facturé et ne nécessite aucune clé. Nos tuiles sont générées à partir des données OpenStreetMap et des nôtres ; le contrôle d'attribution doit afficher © OpenStreetMap contributors et My Geocode, ce que les chargeurs ci-dessus ajoutent pour vous.

Les clés dans le navigateur

Les tuiles de carte, les styles et les chargeurs de bibliothèques ci-dessus ne nécessitent aucune clé, la carte elle-même fonctionne donc toujours. Pour les appels de géocodage, de saisie semi-automatique et d'altitude effectués par les bibliothèques, faites-les passer par votre propre serveur : les chargeurs acceptent un paramètre proxy (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) et y envoient ces appels ; votre serveur ajoute la clé et nous transmet la requête. Les espaces réservés YOUR_MYGEOCODE_KEY ci-dessus restent alors vides.

• Votre proxy peut ajouter un cache et ses propres limites, ce que les navigateurs ne peuvent pas faire.
• Les requêtes arrivent alors depuis l'adresse de votre serveur, de sorte qu'une seule clé couvre un nombre illimité de visiteurs.