#SwitchToHERE

How to Migrate from Google Maps to HERE Maps (2020 edition)

By Raymond Camden | 31 March 2020

Try HERE Maps

Create a free API key to build location-aware apps and services.

Get Started

Nearly two years Jayson DeLancey discussed how to migrate from Google Maps to HERE's JavaScript Maps library. It's been sometime since that initial post so I thought it would be a great time to do an update.

In this post I'm going to demonstrate three different simple use cases with client side maps. I'll begin by demonstrating how to add a map centered at a particular location. Next, I'll show how to add one static marker to the map. Finally I'll show an example where data is loaded from a remote resource and then added to the map as a set of dynamic markers.

For all examples, you will need a key to enable map usage in your projects. You can go here for your Google key (requires a Google account, setting up a project, enabling the Maps API, generating a key) and here to sign up for your HERE developer account (requires an account, a project, and then your key).

Let's Make a Map

Alright, so let's start off with the simplest example possible - just putting a map on the page. Because I'm writing this I'll center the map on the most important location on the planet - Lafayette, Louisiana.

Let's start with Google Maps. First, you add a script tag to your page:


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE&callback=initMap"
    async defer></script>

Two things to note here. First, you need to include your key in the src attribute. Google lets you restrict key usage to specific domains so that isn't a concern. Next, you define the function to execute after the maps library has loaded. In the exmaple above this is "initMap".

The JavaScript to load a map at our position looks like this:


var map;
function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 30.22, lng: -92.02},
		zoom: 8
	});
}

The code instantiates a new Maps object with a specific center and zoom property. Note it's assuming a div on the page with the ID of map. You can see the entire source of this particular demo here.

Here's the result:

Alright, let's take a look at the HERE version. First, we break up our library into different parts based on what you need. Technically just one JS and CSS resource would be required, but to replicate the default UI controls and touch/mouse controls in the Google map, we're going to load in multiple libraries:


<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

Next the JavaScript to add the map. Note that as before, we're skipping the HTML where we define a div to hold the map.


const KEY = 'c1LJuR0Bl2y02PefaQ2d8PvPnBKEN8KdhAOFYR_Bgmw';
var platform = new H.service.Platform({
	'apikey': KEY
});

// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(
	document.getElementById('mapContainer'),
	defaultLayers.vector.normal.map,
	{
		zoom: 8,
		center: { lat: 30.22, lng: -92.02 },
		pixelRatio: window.devicePixelRatio || 1
	}
);

// allow for default touch/drag support
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers);

There is - for sure - a bit more code here, but again the default with HERE Maps is to assume less and give you a bit more control over how the map is going to work. So both of the last lines are how default behaviors and UI are added, if you want them. You can view the entire source for the map here.

Here's the result:

X Marks the Spot

Now that we've seen how to convert a Google Map to HERE Maps, let's consider an example with a marker. In both cases, I'm going to add a hard coded marker that's in the same place as the center of the map, but certainly that is not a requirement. First, the Google Maps version:


var marker = new google.maps.Marker({position: {lat: 30.22, lng: -92.02}, map: map});

Here's how it looks:

Now let's look at the HERE Map's version:


map.addObject(new H.map.Marker({lat:30.22, lng:-92.02}));

And here is how it looks:

You can go to my repository for the Google and HERE versions.

Dynamic Markers

For our third and final comparison, lets consider a more advanced example. For this demo we're going to take information from a USGS feed representing earthquake data in GeoJSON data. The original Google example for this shows a version using JSON/P, but I've updated their demo to use the regular JSON feed as it supports CORS now.


let map;

async function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 2.8, lng: -187.3},
		zoom: 3
	});

	let resp = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson');
	let data = await resp.json();

	for (var i = 0; i < data.features.length; i++) {
		var coords = data.features[i].geometry.coordinates;
		var latLng = new google.maps.LatLng(coords[1],coords[0]);
		var marker = new google.maps.Marker({
			position: latLng,
			map: map
		});
	}
}

I've marked the "initMap" function as async and then used the Fetch API to retrieve the GeoJSON data. I iterate over the data and add a marker for each result. Here's how it looks:

Now here's the HERE version:


const KEY = 'c1LJuR0Bl2y02PefaQ2d8PvPnBKEN8KdhAOFYR_Bgmw';
var platform = new H.service.Platform({
	'apikey': KEY
});

// Obtain the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(
	document.getElementById('mapContainer'),
	defaultLayers.vector.normal.map,
	{
		zoom: 3,
		center: {lat: 2.8, lng: -187.3},
		pixelRatio: window.devicePixelRatio || 1
	}
);

// allow for default touch/drag support
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers);

loadData();

async function loadData() {
	let resp = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson');
	let data = await resp.json();

	for (var i = 0; i < data.features.length; i++) {
		var coords = data.features[i].geometry.coordinates;
		map.addObject(new H.map.Marker({lat:coords[1], lng:coords[0]}));
	}
}

For the most part it's virtually the same except for the call to add the marker. Here's how it looks:

You can go to my repository for the Google and HERE versions.

I hope these demos were useful and be sure to see our other guides in the Switch to HERE guide!