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.
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.
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.
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.
Once you have saved the content, you should see a map with a marker on the entered location.
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.
nice one! thanks!
If need shown more one address, the module support it?
Regards,
Right now, if you want to display more than one address you’ll have to create separate fields. There is an issue (http://drupal.org/node/1606756) for support of multi-line text field.
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?
The short answer is no. 🙁
Look at using the OpenLayers module (http://drupal.org/project/openlayers).
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
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
will be trying those module pairs for my address locating function. thank you so much.
Can I add this to a page node vs. article node?
Absolutely, just add an “address” field to the page content type instead of the article content type.
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?
That’s on the Google Map’s side. Look at the iframe tag that is getting rendered within the
simple-gmap-output.tpl.phpfile.Let’s say maybe you want to show the route from location A to location B. Is it possible,if so how?
Directions can’t be done with this module. Look at the “The Google Directions API” https://developers.google.com/maps/documentation/directions/
Very nice module, tutarial and remaks.
Is there a way to put this Gmap in a view ?
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.
All went well for me expect for zooming. Changing the zooming level does not make any difference on my site. Any suggestion?
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.
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
Thanks. 🙂
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
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.
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.
This module does not support multiple markers. There is issue to add multi-line text support. (https://drupal.org/node/1606756)
Look at using OpenLayers (https://drupal.org/project/openlayers) or Leaflet (https://drupal.org/project/leaflet).
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!!!
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)
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 .
Look at the “Field as Block” module (https://drupal.org/project/fieldblock). This module allows you to display a field within a block.
I wrote a tutorial on how to use the module. (http://webwash.net/tutorials/create-call-action-block-using-field-block-module)
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!
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.
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
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.
Hey, I am just wondering how can I disable scrollwheel? Because we use maps in mobile version, so it is a bit annoying…
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