Switch from Google to HERE JavaScript map geocoding

📘
Note
The 3.1 version of this API has been deprecated. For continued support and feature development, upgrade to the latest 3.2 version.

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 visually appealing location applications with enhanced 3D views.
Advanced enterprise use cases, such as toll cost calculation and truck routing.

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.1/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.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>
      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 searchText = "1070 Lombard Street, San Francisco";
      const geocoder = platform.getSearchService();
      geocoder.geocode({ searchText }, (result) => {
        const location =
          result.Response.View[0].Result[0].Location.DisplayPosition;
        const { Latitude: lat, Longitude: lng } = location;
        const marker = new H.map.Marker({ lat, lng });
        map.addObject(marker);
      });
    </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.