#SwitchToHERE

How to Migrate from Google Maps to HERE Dynamic Maps

By Jayson DeLancey | 19 June 2018

The “Hello World” of mapping is an interactive map where users can dynamically pan and zoom around a latitude and longitude origin. The two maps shown below demonstrate the Google Maps and HERE Location Services Map for the coordinates {lat: 33.8121, lng: -117.9190}. This post is one of a series that can help you migrate from similar offerings on other platforms.

Figure 1: Google Maps

 

Figure 2: HERE Maps

To embed maps like these in your web application you’ll need to (1) include some JavaScript libraries and (2) add some JavaScript code. Otherwise, these maps have similar functionality to zoom in, zoom out, switch to satellite or terrain view, layer traffic, etc.

 

Included Resources

To get your map up and running in your web app, you’ll need to include some external resources in the <head> section of your HTML. With Google Maps this is done with the following <script> tag.

By way of comparison, the HERE Interactive Maps include code will look like the following listing.

 A few differences should jump out at you. The API KEY is not specified when including the HERE resources but comes later in the form of an APP_ID and APP_CODE in the JavaScript code section below. The HERE libraries are more granular in terms of their scope, so instead of including everything in one package you choose à la carte only the libraries you need to use and make use of the API Reference to add customizations based on the needs of your solution. In the case of an interactive map you need several of the modules to provide all of the functionality of a dynamic map.

  • mapjs-core – is basic functionality needed for rendering maps, layers, and other map objects used for platform authentication.
  • mapjs-service – handles client-server communication for map tile retrieval, routing queries, etc.
  • mapjs-ui – provides cross-browser ui components for map settings, zoom control, etc. (you also need the stylesheet)
  • mapsjs-mapevents – defines user-interaction behaviors that can be customized such as panning, pinch-to-zoom, etc.

 

JavaScript

When it comes to page execution, you’ll need the following source code snippet to render the interactive map in your applications.

The Platform object handles authentication which is why you must provide an App ID and App Code. You can retrieve the HERE APP_ID and APP_CODE from your Projects console.  

There are more JavaScript objects here than you find in equivalent Google Maps source code with the expectation you’ll want to explore and customize the look, feel, ui, and behaviors to your own brand and user experience preferences. This is also where you can center the map on a specific coordinate during initialization and set a default zoom level.

When you create the map object, you’ll need to identify the id property of the element where you want to place the map in your application.

<div id=”mapView”></div>

If you are new to web applications or need more context, check out the Quick Start for a more complete walkthrough of the full example

If you are looking for more help making the Switch to HERE you can check out some of the other posts for How to Migrate from Google Routes, How to Migrate from Google Places, How to Place Markers, and How to Migrate Google Maps on iOS.