Introduction

This tutorial lays out the steps for easily switching a simple map display with geocoding from the Google Maps JavaScript API to the HERE Maps JavaScript API.

By the end of this tutorial, you will have successfully converted your code from Google to HERE in order 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 benefits over Google:

  • affordable and simple pricing. HERE offers up to 250K monthly transactions for free regardless of which type of service you are using. Say goodbye to complicated pricing charts.
  • 3D camera options and object rendering. Develop visualy appealing location applications with enhanced 3D views.
  • Advanced enterprise use cases like toll cost calculation and truck routing.

Acquire credentials

The first step to switching to HERE JavaScript is acquiring an API Key from the Projects tab in the developer portal. If you don't yet have a HERE account, please register here.

No credit card is required.

Once you have registered for a HERE account, please grab your API Key under the section JavaScript in the Projects page.

Google Maps geocoding

A simple Google Maps JavaScript API with map display and geocoding setup will look like:

<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

Modify the existing code to look like the following. The code will make a request to the HERE Geocoding API and display a marker on the map with the response's 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.getGeocodingService();
      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>

Please don't forget to swap HERE-API-KEY with your own API Key.

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

results matching ""

    No results matching ""