CMS Geolocation Field Modules will allows us to store geographical locations (e.g. addresses) as value pairs (latitude, longitude) on a Corporate Website. 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 sporting venues. The possibilities are endless.

Here we are going to learn how to show the markers in a map of four tourist attractions in Delhi NCR. We’re going to use the Geolocation Field module and Views.

Step #1. Install Geo Location Scripts

Download and enable the Geolocation Field scripts for your site.

Step #2. Get 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:

The title
The body
An image field, for a photo of the tourist attraction
A 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:

Talkotora Stadium
Wankhede Stadium
Empire Soccer
Central Park

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.