Create a Google Map with Location Markers in Drupal 8

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.

Step #1. Install the Geolocation Field Module

• Download and enable the Geolocation Field module for your site.

Step #2. Get the Google Maps API Key

Next we need to get a Google Maps API Key, which is necessary for the Geolocation module to function properly.

• Go to the Google Maps API Key page
• Click the blue button “GET A KEY”.

• After that you will be requested to create a project. Do that.
• Click “Enable API”.

• Copy the API key.
• Click “FINISH”.

Now go back to your Drupal site.

• Go to Configuration > Geolocation settings.
• Paste the API key into the “Google Maps API key” button.
• Click “Save configuration”.

There are additional Google parameters to configure if we want, but for this tutorial we’re going to work with the default values.

Step #3. Add the Geolocation Field to your Content Type

We’re going to create a new Content type called Tourist attractions with four fields:

1. The title
2. The body
3. An image field, for a photo of the tourist attraction
4. A Geolocation field

The image below shows our content type after adding an image and Geolocation field:

Step #4. Configure the Displays

In order to use the Geolocation Google Geocoder (which integrates with the API key we already generated) we have to change the form display option.

• Go to the “Manage form display” tab for your content type.
• Change the widget to “Geolocation Google Maps API / Geocoding and Map”.

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:

1. Statue of Liberty
2. Rockefeller Center
3. Empire State Building
4. 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.