Substitutos JavaScript para bibliotecas de mapas e de geocodificação

Nesta página

• Google Maps JavaScript API
• Bing Maps V8 Web Control
• Mapbox GL JS e mapbox-gl-geocoder
• Plugins de geocodificação do Leaflet
• HERE Maps API for JavaScript
• MapQuest.js
• Tiles e estilos de mapa
• Chaves no navegador

Google Maps JavaScript API

Carregue a biblioteca de mapas a partir de gapi.mygeocode.com em vez de maps.googleapis.com. O namespace google.maps é fornecido, com tiles de mapa, marcadores, o Geocoder, o Places Autocomplete e o ElevationService servidos por nós. Carregamentos de mapa não contam para a sua cota.

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

O que conta como requisição. Carregamentos de mapa e requisições de tiles são gratuitos. Cada chamada ao Geocoder, cada sessão do Autocomplete e cada chamada ao ElevationService conta como uma requisição.

Bing Maps V8 Web Control

O controle V8 foi descontinuado junto com o restante do Bing Maps for Enterprise. Carregue o controle a partir de bing.mygeocode.com e o namespace Microsoft.Maps continua funcionando, com os nossos tiles, geocodificação e autosuggest por trá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));
      }
    });
  });
}

O que conta como requisição. Carregamentos de mapa e tiles são gratuitos. Cada geocode, cada reverseGeocode e cada sessão de autosuggest conta como uma requisição.

Mapbox GL JS e mapbox-gl-geocoder

Mantenha o código do seu mapa e troque as duas URLs: a do estilo e a da origem do geocodificador. O MapLibre GL JS (o fork de código aberto) é o renderizador recomendado; o Mapbox GL JS v1 também funciona. O mapbox-gl-geocoder tem uma opção origin, então o controle de geocodificação não precisa de nenhuma mudança de código além dessa.

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

O que conta como requisição. Tiles e imagens estáticas são gratuitos. Cada requisição do geocodificador conta como uma requisição; as teclas digitadas no preenchimento automático passam pelo debounce do controle, como de costume.

Plugins de geocodificação do Leaflet

O Leaflet se comunica com geocodificadores por meio de plugins, e os mais populares aceitam uma URL de serviço. Aponte o Leaflet Control Geocoder ou o leaflet-geosearch para osm.mygeocode.com e use os nossos tiles para o 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" }));

O que conta como requisição. Tiles são gratuitos. Cada geocodificação e cada geocodificação reversa conta como uma requisição.

HERE Maps API for JavaScript

Carregue os bundles do mapsjs a partir de here.mygeocode.com e crie a plataforma como de costume. H.Map, H.service.Platform e o serviço de busca mantêm as suas assinaturas, com tiles vetoriais e geocodificação fornecidos por nós.

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

O que conta como requisição. Carregamentos de mapa e tiles são gratuitos. Cada chamada de geocode, reverseGeocode e autosuggest conta como uma requisição.

MapQuest.js

O MapQuest.js envolve o Leaflet e adiciona L.mapquest.geocoding(). Carregue o bundle a partir de mapquest.mygeocode.com e defina a sua chave 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);
});

O que conta como requisição. Tiles são gratuitos. Cada requisição de geocode, reverse e search-ahead conta como uma requisição.

Tiles e estilos de mapa

Todos os loaders acima usam o mesmo serviço de tiles, que você também pode usar diretamente a partir de qualquer biblioteca.

Os estilos são streets, light, dark, outdoors e satellite. O tráfego de tiles não é cobrado e não precisa de chave. Nossos tiles são renderizados a partir de dados do OpenStreetMap e dos nossos próprios; o controle de atribuição deve mostrar © OpenStreetMap contributors e My Geocode, o que os loaders acima já adicionam para você.

Chaves no navegador

Tiles de mapa, estilos e os loaders de bibliotecas acima não precisam de chave nenhuma, então o mapa em si sempre funciona. Para as chamadas de geocodificação, preenchimento automático e altitude que as bibliotecas fazem, encaminhe-as pelo seu próprio servidor: os loaders aceitam um parâmetro proxy (gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo) e enviam essas chamadas para lá; o seu servidor adiciona a chave e repassa a requisição para nós. Os marcadores YOUR_MYGEOCODE_KEY acima ficam então vazios.

• O seu proxy pode adicionar cache e limites próprios, o que os navegadores não podem.
• As requisições passam então a chegar do endereço do seu servidor, então uma chave atende qualquer número de visitantes.