Google Maps in Drupal

Integrating Google Maps into the template Drupal installations we have been developing at the NHM (branded “Scratchpads”) is amazingly easy thanks to the Drupal's GMap module. Once installed this puts a Google Map Macro creator on every site. With this a user can intuitively create and customize a Google Map for any location. You can also add points, create polygons or mark a route just by clicking in the map macro. With a big of fiddling it should be possible for users to even highlight whole countries. Perhaps the best feature is that it is possible for users to dynamically plot points on their maps from information in an RSS feed (these are automatically served from the Scratchpads). In other words information such as georeferenced specimens, or georeferenced site users ecould be dynamically plotted on a map on a site.

We will be rolling out the GMaps module across the Scratchpads over the next few weeks (we just need to finalize the ability to highlight whole counties). In the mean time, here are some brief instructions on how to use it:

Step 1. Create a map with macro creator

Each site includes a macro to create a map that you can customize it as you see fit. You can see the GMap Macro on my site here. To create a map:

  • Scroll to the bottom of the macro to define the Map Height and Map Width. This is in pixels (try "500px" by "500px" to start with) and make sure you include the "px" after the number. Scroll back to the top and you will see the template map has automatically resized.
  • Move the map around with the mouse to the area you want to include. Also adjust the zoom control to achieve the level of magnification you want. You can choose between a basic map, a Satellite map or a hybrid version by switching between the buttons.
  • You can add points, lines or circles by (single) clicking on the map. You can switch between these options with the pull down menu where it says Click Map. Experiment by clicking around a map to see what happens.
  • Some of the line/polygon settings are a little temperamental, but the marker options work well allowing you to change the marker type. It is possible to link one marker to another.
  • To remove a marker make sure the Click Marker option is set to "remove" and then click the marker to be removed on the map.
  • Each map needs a different name or identifier (set to "map" by default). Type this in to the Map id attribute field. This can only contain numbers letters and the "-" symbol, and must be unique for each map that will appear on the same page.
  • The Control feature (None|Large|Small) allows you to specify whether there is a zoom control on the map and what size it is.
  • There are all sorts of advanced options available for customizing your map. The most important of these is the ability to have feeds that take information from a local RSS feed with geolocation data and dynamically plot this on the map. I'll blog about this separately when I have figured out how to do it!

Step 2. Put the map on a webpage (node) in your site

Scroll down to the bottom of the macro and copy the Macro Text that appears in the text box. You then need to paste this into the body field of a new page (node). When you do this make sure to disable rich text (just underneath the text box) and under Input Format select the GMap Filter option. You can add any other information to the page with HTML or the rich text editor.Just do not change the GMap Macro text. When you are done, click Submit and the new page with your Google Map and any plotted points, lines or polygons will appear.

Copied below is an example map of Spain showing the places I stayed during a recent bird watching trip. The macro use to create this map is also shown:

GMap Macro of Spain:

"gmap markers=numbers::40.49500373230525,-3.582916259765625:Start <br><a href="http://www.flickr.com/photos/vsmithuk/sets/72157600269221990/">My Spain flickr pictures</a> + 39.86758762451019,-4.025115966796875:Day 2 <br><a href="http://www.flickr.com/photos/74733773@N00/514919054"><img src="/files/images/tinyToledo.jpg" width="75" height="75" border="0"></a> <a href="http://www.flickr.com/photos/74733773@N00/514919054">Toledo</a> + 39.97817244470628,-6.0479736328125:Day 3 + 37.13514018576747,-6.486053466796875:Day 4 + 36.16005298551354,-5.348968505859375:Day 5 and 6 + 36.8510544475565,-2.451324462890625:Day 7 and 8 + 37.79350762410675,-3.78204345703125:Day 9 + 39.86811464206973,-4.018764495849609:Day 10 |align=Left |zoom=6 |center=40.17887331434696,-4.39453125 |width=550px |height=550px |id=Spain |control=Large |type=Map"

GMap Result:

Javascript is required to view this map.

Comments

Thanks

Hi Vince,

Thanks for this - found it really useful. I wonder how much will change in terms of drupal development when drupal 7 is released for things like gmap and location.

Cheers

help on googlemap

Hi , I have added markers and i have copied the text macro text and i want to use this on my event page is this posible can i use this on my event page if yes please tell me how can i do this and secondly when i create a page(node) and add this macro text in body field did not show any thing just show like that.... MAP(Name of Page) Body:
Javascript is required to view this map.
I have spent more time on it please tell me how can i do this and there is not any gmap filter in my input format...........?

User Markers

Hi , I want users be able to create markers on the maps.when i Create macro code and paste it in the any node when any anonymous user will access that map when he clicks on the maps there should be a marker there. Please help Thanks, Shoeb

View My Stats