Reemplazos compatibles en JavaScript para bibliotecas de mapas y de geocodificación

En esta página

• Google Maps JavaScript API
• Bing Maps V8 Web Control
• Mapbox GL JS y mapbox-gl-geocoder
• Plugins de geocodificación de Leaflet
• HERE Maps API for JavaScript
• MapQuest.js
• Mapas base y estilos
• Claves en el navegador

Google Maps JavaScript API

Carga la biblioteca de mapas desde gapi.mygeocode.com en lugar de maps.googleapis.com. Se proporciona el espacio de nombres google.maps, con los mapas base, los marcadores, el Geocoder, Places Autocomplete y el ElevationService servidos por nosotros. Las cargas de mapa no cuentan para tu cuota.

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

Qué cuenta como solicitud. Las cargas de mapa y las solicitudes de mapas base son gratuitas. Cada llamada a Geocoder, cada sesión de Autocomplete y cada llamada a ElevationService cuenta como una solicitud.

Bing Maps V8 Web Control

El control V8 se retira junto con el resto de Bing Maps for Enterprise. Carga el control desde bing.mygeocode.com y el espacio de nombres Microsoft.Maps sigue funcionando, con nuestros mapas base, geocodificación y autosugerencias detrás.

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

Qué cuenta como solicitud. Las cargas de mapa y los mapas base son gratuitos. Cada geocode, cada reverseGeocode y cada sesión de autosuggest cuenta como una solicitud.

Mapbox GL JS y mapbox-gl-geocoder

Conserva el código de tu mapa y cambia las dos URL: la del estilo y el origen del geocodificador. MapLibre GL JS (el fork de código abierto) es el motor de renderizado recomendado; Mapbox GL JS v1 también funciona. mapbox-gl-geocoder tiene una opción origin, así que el control de geocodificación no necesita más cambios de código que ese.

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

Qué cuenta como solicitud. Las teselas y las imágenes estáticas son gratuitas. Cada solicitud al geocodificador cuenta como una solicitud; el control aplica debounce a las pulsaciones del autocompletado como de costumbre.

Plugins de geocodificación de Leaflet

Leaflet se comunica con los geocodificadores mediante plugins, y los más populares aceptan una URL de servicio. Apunta Leaflet Control Geocoder o leaflet-geosearch a osm.mygeocode.com y usa nuestras teselas para el mapa base.

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

Qué cuenta como solicitud. Las teselas son gratuitas. Cada geocodificación directa y cada geocodificación inversa cuenta como una solicitud.

HERE Maps API for JavaScript

Carga los paquetes mapsjs desde here.mygeocode.com y crea la plataforma como de costumbre. H.Map, H.service.Platform y el servicio de búsqueda conservan sus firmas, con teselas vectoriales y geocodificación nuestras.

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

Qué cuenta como solicitud. Las cargas de mapa y los mapas base son gratuitos. Cada llamada a geocode, reverseGeocode y autosuggest cuenta como una solicitud.

MapQuest.js

MapQuest.js envuelve Leaflet y añade L.mapquest.geocoding(). Carga el paquete desde mapquest.mygeocode.com y configura tu clave como antes.

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

Qué cuenta como solicitud. Las teselas son gratuitas. Cada solicitud de geocode, reverse y search-ahead cuenta como una solicitud.

Mapas base y estilos

Todos los cargadores anteriores usan el mismo servicio de teselas, que también puedes usar directamente desde cualquier biblioteca.

Los estilos son streets, light, dark, outdoors y satellite. El tráfico de teselas no se factura y no necesita clave. Nuestras teselas se generan a partir de datos de OpenStreetMap y datos propios; el control de atribución debe mostrar © OpenStreetMap contributors y My Geocode, algo que los cargadores anteriores añaden por ti.

Claves en el navegador

Los mapas base, los estilos y los cargadores de bibliotecas anteriores no necesitan ninguna clave, así que el mapa en sí siempre funciona. Para las llamadas de geocodificación, autocompletado y elevación que hacen las bibliotecas, pásalas por tu propio servidor: los cargadores aceptan un parámetro proxy (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) y envían esas llamadas allí; tu servidor añade la clave y nos reenvía la solicitud. Los marcadores YOUR_MYGEOCODE_KEY de los ejemplos anteriores se dejan entonces vacíos.

• Tu proxy puede añadir caché y sus propios límites, algo que los navegadores no pueden hacer.
• Las solicitudes llegan entonces desde la dirección de tu servidor, así que una sola clave cubre cualquier número de visitantes.