Purchase our premium subscription and get access to HD videos and our support forum.

Using Simple Google Maps Module In Drupal 7

The Simple Google Maps module for Drupal is a field formatter which displays a map using Google Maps. Using this module, you can display a map without having to install three or more location modules. All you have to do is, create a text field to store the address and configure the Simple Google Maps field formatter in the manage display section.

The geocoding - converting the address to a longitude and latitude coordinate - of the address is handled by Google Maps API when the formatter is rendered. Drupal will not store the geographical coordinates for each address. If you need to store coordinates in the database look at the Geofield module.

In this tutorial, I'll show you how to store an address and display a map in a few easy steps.

Getting Started

First, go download and install the Simple Google Maps module.

Create Address Text Field

The first piece of work we'll have to do is create a text field.

How To

1. Go to Structure -> "Content types" (admin/structure/types) and click on the "manage fields" link for the Article content type.

2. Create a new field called Address, select Text from the "Field type" and select "Text field" as the widget. Click on the Save button to create the field.

Fig 1.0

3. Go to the manage display section (admin/structure/types/manage/article/display) for the Article content type. Select the "Google Map from one-line address" formatter from the Address drop-down.

Fig 1.1

4. Click on the cog wheel to configure the map. Using the configuration form, you can change the width/height, zoom level and map type. All we'll do is change the "Width of embedded map" and "Height of embedded map" to 600.

Fig 1.2

Click on the Update button and save the "Manage display" form.

5. Now go and test the map out, go to Content -> "Add content" -> Articles (node/add/article) and add an address to the field we created for storing addresses.

Fig 1.3

Once you have saved the content, you should see a map with a marker on the entered location.

Fig 1.4

As you can see Simple Google Maps module gets straight to the point. This module can be used for most location use cases on a website.

If you have any questions, please leave a comment.

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Yuan on

If need shown more one address, the module support it?

Regards,

Submitted by Dori on

Can this module be used for displaying multiple pins on the map? So if there were several items of this content type can a view display them together on a single map?

Submitted by leo on

Will OpenLayers be good for store locating? Like i saved 10 store addresses/locations in my site and users can input their address and google map displays my stores in a specific radius? thanks

ivan's picture

Submitted by ivan on

OpenLayers is only used for displaying maps not for storing locations.

For storing locations look at:

- Address Field and Geofield
- Or, Geolocation Field and Geolocation Proximity

Submitted by leo on

will be trying those module pairs for my address locating function. thank you so much.

Submitted by John on

Can I add this to a page node vs. article node?

ivan's picture

Submitted by ivan on

Absolutely, just add an "address" field to the page content type instead of the article content type.

Submitted by brindha on

Hi,

This is nice tutorial... i want to change marker in google map.... now i got A letter with rounded background. how to change the marker?

ivan's picture

Submitted by ivan on

That's on the Google Map's side. Look at the iframe tag that is getting rendered within the simple-gmap-output.tpl.php file.

Submitted by Faith on

Let's say maybe you want to show the route from location A to location B. Is it possible,if so how?

Submitted by Bruno S on

Very nice module, tutarial and remaks.
Is there a way to put this Gmap in a view ?

ivan's picture

Submitted by ivan on

You can't add the map directly in Views. But you can configure views to display a rendered entity, just make sure you configure the map as a formatter via the "manage display" page.

Submitted by Ranjith Raman on

All went well for me expect for zooming. Changing the zooming level does not make any difference on my site. Any suggestion?

ivan's picture

Submitted by ivan on

Can't think of a reason off the top of my head. Double check the display formatter settings and make sure the form has saved the settings.

Submitted by wayne butt on

After much searching for step-by-step instructions on how to add the map to my site (because I'm very new to web building and NEED step-by-step), these instructions had my map up and running in 5 minutes. Excellent and very well written. The web needs more of you, Ivan! Thanks a bunch for this well written tutorial....Wayne

ivan's picture

Submitted by ivan on

Thanks. :)

Submitted by Mario on

Unsure of how to get the map field to center itself on the page. I know it's probably in my CSS but do you have any areas I should start looking?

Thanks

ivan's picture

Submitted by ivan on

You can do that with CSS. Ever theme is different so I don't know where in your CSS file you should look.

Just search for a ".field" class on a wrapping DIV around the map and centre it using CSS.

Submitted by Nikhil on

Also, I need to calculate the distance between the current user location where he/she viewing a site and the location displayed over the node in drupal 7. Can you let me the module name or show me the example to do this task. Please!!!

ivan's picture

Submitted by ivan on

Sorry I can't think of a specific module off the top of my head. :(

But look into Openlayers or Leaflet and see if they offer that functionality. Another module worth looking at is Location. (https://drupal.org/project/location)

Submitted by Praveen on

Hi

Is it possible to add map node to blocks ..
Actually i already created contact form node ...so i want to add this map as a block .

Submitted by mak on

Hi Ivan,
A very help tutorial.
How can I hide those extra features like Map type (top right corner), map control (top left corner), Google logo and the term and condition text in the (right bottom corner). As I see you do not have these in the picture above. Thanks!

ivan's picture

Submitted by ivan on

The logo and terms and condition text were cropped out of the image. As far as I'm aware you can not remove them.

As for the map type and control, they can be disabled using the Google Maps API. But I'm not sure if the "Simple Google Maps" module allows you to disable them.

Submitted by iovi on

one problem .... or two
1. how can I set map in the Contacts tab, not on the main page ?
2. map becomes visible only if you select Read more

ivan's picture

Submitted by ivan on

First of all, this module is a formatter and this means that the map will only appear on fieldable entities.

1. how can I set map in the Contacts tab, not on the main page ?

You can't use this module to add a map on the contacts page. You'll have to look for another solution.

2. map becomes visible only if you select Read more

This really depends on how your site is setup. You'll have to configure your view modes in the "manage display" section.

Submitted by Yani on

Hey, I am just wondering how can I disable scrollwheel? Because we use maps in mobile version, so it is a bit annoying...

ivan's picture

Submitted by ivan on

I do not think you can disable the scroll wheel from the formatter settings. This module offers basic integration with Google Maps. If you need to customise the map beyond the available options, then you'll have to look for a different solution