Hands on

How to Migrate from Google Map Markers to HERE Map Markers

By Michael Palermo | 26 July 2018

A fundamental use case for displaying maps is pinning markers on them. This post is one of a series that can help you to migrate from similar offerings on other platforms such as Google Maps. To follow along, you will need a developer account you can register for at http://developer.here.com

Of course to pin a marker on a map - you need a map. To learn how to display a map, please look at our post on how to display a map, which also explains what resources to include in the client HTML.

Add a Simple Marker

When adding a simple marker to Google Maps, the code looks like the following:



When adding a simple marker to HERE Maps, the code is as follows:



In the code above, 'M' is helper object maintaining references and data used in all the HERE demos in this post. For full context, see the entire HTML and code provided at the end. The result of running the function displays the default marker in the center of the United States as seen here:

Default Marker

Add a Custom Image Marker

You can add your own image as a marker. Here is the code to make that work:



As noted above, associating the marker object with an icon object that has a path to your image is all it takes. Be sure the image you specify is not too large or it will overpower the map. Keep the image dimensions roughly between 10 to 50 pixels in width/height. When the code above executes, it places a custom home image over Phoenix, AZ (my home town):

Custom Image Marker

Add a Marker Using SVG

You can also use SVG markup to create a custom marker. A simple example of this in code is here:



When the code above executes, it creates a small white rectangle with an orange letter 'C' using SVG markup. The markup is then associated with an icon object, which is then supplied to the marker object. This is what is displayed when the code exectues:

SVG Marker

Add a DOM Marker

Another option for markers is to use a DOM element. You control the element and it's style, and can associate events with it too. The following is a simple code example using this approach:



In the code above, a div element is created and styled. It also attaches a title attribute to provide a simple tooltip. When the domIcon object is created, it is initialized with the dynamic div element. Notice when attaching events, the element is cloned so that you can add multiple types of this marker to a map if desired. When the code executes, it displays the marker at Berkeley, CA. When hovering over the marker, it displays the tooltip and changes the opacity.

DOM Marker

Complete Example

To put all the functions discussed in context, here is the complete HTML and code for all the HERE marker features mentioned in this post:



Summary

In this post you learned how to add a variety of marker types to a map using HERE location services. For more information on this topic, please visit our documentation. Happy coding!