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.

About The Author

34 thoughts on “Using Simple Google Maps Module In Drupal 7”

  1. 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?

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

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

  2. 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?

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

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

  3. Ranjith Raman

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

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

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

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

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

  6. This is a very nice module and it works for me. Also, please can you let me know about the multiple markers on map in drupal7.

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

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

  9. 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!

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

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

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

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

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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top