Create a Google Map with Location Markers in Drupal 8

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

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.

07

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

08

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

09

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.

10

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:

13

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.

15

  • 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.

16

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:

17

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

18

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

19

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

20

  • Choose the field “Address”.
  • Click checkbox next to it, the click “Add and configure fields”.

21

  • Leave the Formatter as “Geolocation Lat/Lang”
  • Check “Exclude from display” and click “Apply”.

22

Step #8. The FORMAT Settings

  • Click on “Settings” on the FORMAT Section of the Views UI

23

  • Geolocation source field: Content: Address
  • Title source field: None

24

  • 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.

25

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.

26

  • Save the view and check your page.

27

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.

Author

  • Jorge Montoya

    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.

0 0 votes
Article Rating
Subscribe
Notify of
33 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Willem Van Vlaenderen
Willem Van Vlaenderen
6 years ago

You should be my teacher! Never seen such a clear step-by-step explanation!

Mathieu
Mathieu
6 years ago

Thank you for this tutorial. How to create exposed filters with address and proximity ? I can not combine these two filters.
https://www.drupal.org/project/geolocation/issues/2882533

Andrés
Andrés
6 years ago

This tutorial was great!!! I’ve been trying to create a map for my Drupal site for hours, and then I stumble upon with this easy to follow steps and finish my map in a matter of minutes! ¡gracias Jorge!

Hartland Peninsula
Hartland Peninsula
6 years ago

Awesome, helped me make maps for my hartland peninsula site, great instructions, so easy, but difficult if didn’t have this help. Thank you.

John M.
John M.
6 years ago

Jorge, thanks, this is almost exactly what I’m looking for except in my case I will have map markers all across the country. How difficult would it be to add the ability to show the map based on site visitors location. If someone is in New York, how would I set the zoom level dynamically to show the map centered say 50 mi around New York rather than show the entire country? Thanks.

Manuel Velasco
Manuel Velasco
6 years ago

Thanks for this tutorial, regards from Bolivia.

Philipp
Philipp
6 years ago

Great Tutorial 🙂 is there also an alternative to Google maps, like open street maps available?

Anonymous
Anonymous
5 years ago

LOL!! you r great 🙂

Brooke
Brooke
5 years ago

This is great! I’ve seen a few examples of ‘point’ maps for Drupal but not examples of state and/or choropleth maps. Does this even exist for Drupal 8? Seems we are quite a ways behind Drupal 7 with mapping technology, if not.

John
John
5 years ago

Great Tutorial. When I click on the marker, I would like nothing to happen. The map is on a page with all necessary info about the location. I feel like I’m missing something obvious.

TIA, John

Guillermo Rivera
Guillermo Rivera
5 years ago

Is there a way to add a search input in the view?

mrtechnique
5 years ago

Thanks for providing this tutorial, Jorge! I created the page and I created a block and added it to a directory page, so my page has a table with rows of gyms, their locations, and the disciplines offered. The map is below the table.

I have a few questions.

When I click on a marker, how can I have more than just the title link show up? I want to show the address in the marker bubble as well and a link to get directions.

I have 2 exposed filter criteria: City and Disciplines. How can I just show map markers that are relevant to the filter criteria? For example, if the person selects Atlanta from the dropdown list, only map markers in Atlanta will be shown. Would I need to add a Contextual Filter or a Relationship? If so, which one and how?

mrtechnique
5 years ago
Reply to  Tom Nguyen

I figured it out. To get more than just the title link to show up, I added whatever field I wanted to be shown. To show map markers that depend on the filters chosen, I added 2 contextual filters.

Anonymous
Anonymous
5 years ago

Thanks for sharing… I wondered if you can add a list of links to the right/left side of the map for each entry so it is available to click and see that entry on the map…

Sandeep Jain
Sandeep Jain
5 years ago

Thank you for the detailed tutorial. How we can use the map block to render in ajax. So if a user clicks on a button then only Maps will load and display on the same page.
Facing this issue because of google’s Maps uses limit. So I do not want to load maps on every request only if user click on location button the with help of Ajax google Maps will load on the same page. In my case Map is not showing, other data is accessible.

Nora
Nora
5 years ago

Hi Jorge, my team did this to one of our client’s website, and right now they cant even search for plase using this module. I just wanna know, is there some sort of limitation on the usage for this module (like do we have to pay for the service or what) / or just anything that I should know about before installing this? Please help, currently researching for solutions to client

Gustavo
Gustavo
5 years ago

Hi, thanks for the explanation it is very clear.

I need to put together a view similar to the example, but I need the markers to be different according to the value of another field. Do you know if it is possible? Could you give some example? Thank you !

Ellen Liu
Ellen Liu
4 years ago

I have been trying geolocation version 8-x.3.0.rc1 from your tutorial for two weeks. When I create a view, I can see maps on the preview screen. However, when I link the view to actual URL, the map just showed a big invisible rectangle. I tried to install the older version of this Drupal module, the results keep the same. Do you have any ideas why this is happening?

Many thanks ahead!

Ellen Liu
Ellen Liu
4 years ago
Reply to  Ellen Liu

Hi Jorge,
I solved it! The problem comes from the theme I am using for this Drupal site. After I override the default css sfrom the .view-block {display: flex;} to {display: block;} The google map with markers just shows up.

Thank you for this wonderful tutorial.

kenshynne
kenshynne
4 years ago

hey why can’t i search any location?

Manoj Raj
Manoj Raj
4 years ago

Any option hovering the content instead of click option.

Pratyush
Pratyush
3 years ago

How can i apply custom css to the info pop on map. 
Consider i am using Drupal 8..thanks 

Pratyush
Pratyush
3 years ago

The tutorial is really helpful and well explained.. Cheers!!! 

33
0
Would love your thoughts, please comment.x
()
x