Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Create a Google Map with Location Markers in Drupal 8

Written by Jorge Montoya
on August 28, 2017 |Drupal

The Geolocation Field Module allows us to store geographical locations (e.g. addresses) as value pairs (latitude, longitude). These values can be rendered in a map with the help of a map marker.

Many map markers in a map are useful in a wide variety of cases, for example to show graphically different offices of a bank in a city or to show the cities/countries of a concert tour of your favorite band. The possibilities are endless.

In this tutorial we are going to learn how to show the markers in a map of four tourist attractions in New York City. We're going to use the Geolocation Field module and Views.

Doing this will allow us to enter values like addresses or even keywords to search our tourist attractions instead of heaving to enter latitude and longitude values.

Click "Manage display".

Change the display option for the address field to "Geolocation Google Maps API - Map".

Doing this will allow us to get a map when viewing the node instead of a just seeing the Latitude and Longitude values. This is very similar to the display change we just made for the form.

Step #5. Creating Nodes

Now let's create the following four nodes to display on our map:

Statue of Liberty

Rockefeller Center

Empire State Building

Central Park

This image gives a preview of how the content type looks when you're entering a tourist attraction:

This image shows the end result, after you've published a tourist attraction:

Step #6. The Markers View

Now it’s time to create our Map View with all the map markers in it:

Click Structure > Views > Add new View

Title: Markers Map

Show: "Content" of type "Tourist attractions"

Page Settings: Create a Page

Display format: Geolocation Google Maps API - CommonMap

Step #7. Add Fields to the View

In order to get the map working, we have to include at least the address. The address field is what Google Maps API will reference for the geolocation.

Click "Add" in the FIELDS section

Choose the field "Address".

Click checkbox next to it, the click "Add and configure fields".

Leave the Formatter as "Geolocation Lat/Lang"

Check "Exclude from display" and click "Apply".

Step #8. The FORMAT Settings

Click on "Settings" on the FORMAT Section of the Views UI

Geolocation source field: Content: Address

Title source field: None

Scroll to the GOOGLE MAPS SETTINGS in this popup window

Open them and go to the MARKER option

Uncheck Automatically show info text.

This will prevent the tooltip of the first view row to display automatically (instead of that, you have to click on the marker to display the tooltip).

Click Apply.

Step #9. Configure the Title field

Click on the Title Field.

Customize the field HTML to be displayed as a H2 Tag under STYLE SETTINGS.

Click Apply.

Save the view and check your page.

Congratulations

You have now a map with multiple markers with an easy Geolocation Field - Views approach. Your possibilities are now endless. It’s up to you. I hope you enjoyed reading this tutorial.

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.