Switch from Google to HERE Maps API for JavaScript geocoding

This tutorial describes the steps to switch a simple geocoding map from Google Maps JavaScript API to the HERE Maps API for JavaScript.

This tutorial will convert your code from Google Maps API to HERE Maps API to allow you to:

Construct a request and receive a response from the HERE Geocoding API (convert an address to coordinates) using the JavaScript interface.
Add a marker of the geocode response on the map.

Why switch to the HERE Maps JavaScript API?

The HERE Location Platform has several advantages over Google:

Affordable and simple pricing. HERE offers up to 250K monthly transactions for free regardless of which type of service you are using. No complicated pricing charts.
3D camera options and object rendering. Develop visualy appealing location applications with enhanced 3D views.

Acquire credentials

If you don't have a HERE account, see HERE Platform account for more information.

Once you have registered for a HERE account, acquire your API Key.

Google Maps geocoding

The following code shows a simple Google Maps JavaScript API with map display and geocoding:

<html>
  <head>
    <title>Simple Google Map</title>
    <style>
      html,
      body {
        border: 0;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 37.773972, lng: -122.431297 },
          zoom: 13,
        });

        //Begin Geocoder
        const geocoder = new google.maps.Geocoder();
        const address = "1070 Lombard Street, San Francisco";
        geocoder.geocode({ address }, (results, status) => {
          const marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
          });
        });
      }
    </script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=GOOGLE-API-KEY&callback=initMap"
      async
      defer
    ></script>
  </body>
</html>

HERE Maps geocoding

Edit the existing code as follows. The code makes a request to the HERE Geocoding API and displays a marker on the map with response coordinates.

<html>
  <head>
    <title>Simple HERE Map</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://js.api.here.com/v3/3.2/mapsjs-ui.css"
    />
    <style>
      html,
      body {
        border: 0;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100vh;
        width: 100vw;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
    <script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
    <script>
      const platform = new H.service.Platform({ apikey: "HERE-API-KEY" });
      const defaultLayers = platform.createDefaultLayers();
      const map = new H.Map(
        document.getElementById("map"),
        defaultLayers.vector.normal.map,
        {
          center: { lat: 37.773972, lng: -122.431297 },
          zoom: 13,
          pixelRatio: window.devicePixelRatio || 1,
        }
      );
      window.addEventListener("resize", () => map.getViewPort().resize());
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      const ui = H.ui.UI.createDefault(map, defaultLayers);

      // Begin geocoding
      const geocoder = platform.getSearchService();
      geocoder.geocode(
        { q: "1070 Lombard Street, San Francisco" },
        (result) => {
          // Add a marker for each location found
          result.items.forEach((item) => {
            map.addObject(new H.map.Marker(item.position));
          });
        },
        console.error
      );
    </script>
  </body>
</html>

📘
Note
Substitute your API key for HERE-API-KEY.

For more information about geocoding with the HERE Maps JavaScript API, see this guide.