JavaScript drop-ins for map and geocoder libraries

On this page

• Google Maps JavaScript API
• Bing Maps V8 Web Control
• Mapbox GL JS and mapbox-gl-geocoder
• Leaflet geocoder plugins
• HERE Maps API for JavaScript
• MapQuest.js
• Map tiles and styles
• Keys in the browser

Google Maps JavaScript API

Load the maps library from gapi.mygeocode.com instead of maps.googleapis.com. The google.maps namespace is provided, with map tiles, markers, the Geocoder, Places Autocomplete and the ElevationService served by us. Map loads do not count toward your 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);
  });
}

What counts as a request. Map loads and tile requests are free. Each Geocoder call, each Autocomplete session and each ElevationService call counts as one request.

Bing Maps V8 Web Control

The V8 control is retired along with the rest of Bing Maps for Enterprise. Load the control from bing.mygeocode.com and the Microsoft.Maps namespace keeps working, with our tiles, geocoding and autosuggest behind it.

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

What counts as a request. Map loads and tiles are free. Each geocode, reverseGeocode and each autosuggest session counts as one request.

Mapbox GL JS and mapbox-gl-geocoder

Keep your map code and swap the two URLs: the style, and the geocoder origin. MapLibre GL JS (the open source fork) is the recommended renderer; Mapbox GL JS v1 also works. mapbox-gl-geocoder has an origin option, so the geocoder control needs no code changes beyond that.

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"
);
const { features } = await res.json();
map.flyTo({ center: features[0].center, zoom: 15 });

What counts as a request. Tiles and static images are free. Each geocoder request counts as one request; the autocomplete keystrokes are debounced by the control as usual.

Leaflet geocoder plugins

Leaflet talks to geocoders through plugins, and the popular ones accept a service URL. Point Leaflet Control Geocoder or leaflet-geosearch at osm.mygeocode.com and use our tiles for the base map.

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

What counts as a request. Tiles are free. Each geocode and each reverse geocode counts as one request.

HERE Maps API for JavaScript

Load the mapsjs bundles from here.mygeocode.com and create the platform as usual. H.Map, H.service.Platform and the search service keep their signatures, with vector tiles and geocoding from us.

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

What counts as a request. Map loads and tiles are free. Each geocode, reverseGeocode and autosuggest call counts as one request.

MapQuest.js

MapQuest.js wraps Leaflet and adds L.mapquest.geocoding(). Load the bundle from mapquest.mygeocode.com and set your key as before.

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

What counts as a request. Tiles are free. Each geocode, reverse and search-ahead request counts as one request.

Map tiles and styles

Every loader above uses the same tile service, which you can also use directly from any library.

Styles are streets, light, dark, outdoors and satellite. Add ?key=... to attach tile traffic to your account if you want it in your dashboard; it is not billed either way. Our tiles are rendered from OpenStreetMap data and our own; the attribution control must show © OpenStreetMap contributors and My Geocode, which the loaders above add for you.

Keys in the browser

For pages served to the public, use one of these instead:

• No key. Each visitor's browser uses the free 2,500 requests a day from their own IP address. For most sites this is enough, and it costs you nothing. The YOUR_MYGEOCODE_KEY placeholders above can simply be left empty.
• Your own proxy. Route geocoding calls through your server, which uses a normal key or a whitelisted IP. The map loaders accept a proxy parameter for this: gapi.mygeocode.com/maps/api/js?proxy=https://yoursite.com/geo.