Drupal 7 Geolocation Field Module

By shane
Wed, 2012-10-17 12:59
Daily Dose of Drupal Episode #31

Share with Others

Have you ever had the need to enter the location of a place and display that location on a map in Drupal? If so, the Geolocation Field module will be a huge help. The Geolocation Field module allows you to not only select various ways to input the location of a place, but also gives you various options for how to display that location to users.

In this episode you will learn:

  • How to create a Drupal 7 content type that uses the Geolocation Field module.
  • How to configure the various widgets for the Geolocation Field module.
  • How to select various display options for the Geolocation Field module, including an HTML5 map, Static Google Map, and a Dynamic Google Map.

Welcome to another Daily Dose of Drupal, today we’re on Episode Number 31. As always I am Shane, you can follow me on Twitter @smthomas3 or go to codekarate.com and sign up for the newsletter. Okay we’re going to going over today … we’re going to be looking at the Geo Location Field Module. You can see it’s at drupal.org/project/geolocation.

And this module … I haven’t had to used it a lot but it is a pretty cool module so we’re going to go over what it can do and how you could use it on a Drupal website and some reasons you may need to use this is let’s say you need to display a map on your site of a specific location or perhaps you needed … you’re building a business listing website and you need to keep track of the location, you can read about it here and of course download it, we’re going to hop into our command line and go ahead and download Geolocation, you can see that it comes with three modules; Geolocation HTML 5,Geolocation Google Maps and then just the main Geolocation Module. So I have a brand new test site here and there’s nothing on it so we’ll go into the modules page and I will scroll down and you will see that I have the three modules under the Geolocation Field Set.

So we’re going to go ahead and turn all three of them on for this demonstration here; so I will save that and the next step is we’re going to actually build the content type to use this field and it’s a Geolocation field and it hooks into Drupal standard fields, you can use it on any entity I believed but we’re just going to use it on a simple content type, we’re going to create a new content type and we’ll just call this Listing, go ahead and save that and we’re going to go into Manage Fields, we’re going to add a new Field and just call it Location and select Geolocation here and as for the Widget you can select either Latitude, Longitude, Google Maps or HTML 5 Widget.

We’ll start with Latitude Longitude just to show how that works and looks, click Save, you can see you can enter default and you actually have to enter in the Latitude and Longitude of the location. So if we go into Add Content and I go to Add a New Listing I would need to know the business latitude and longitude which you may know that but in many cases you probably not so we’ll go ahead and we will change the widget from latitude and longitude, we could use HTML 5 which I believe that can just grab your current location but we actually want to use the Google Map Widget and this gets to be pretty cool here; so if we save that and now when we come back to this page if we refresh you can see we have an interactive Google Map here which is pretty neat if you ask me. So the next step is I could click My Location which then if you notice at the top here; Chrome is asking me if it can use my computer’s location, I’ll go ahead and allow it and you can see it goes ahead and brings in my exact location and as you follow South Dakota, pulls in my exact address, gives the latitude longitude down here, I can also type in a specific location, you can see I typed in Portland, Oregon, it goes ahead and pulls in that location, of course I have to give this a title so I’ll go ahead and call it Drupal Con Portland 2013, I could give it a body, I’m not going to do it this time but you can see that you can go ahead and select pretty much anywhere in the map, you could also click on the map to set a specific or set the pen in a specific location so you could zoom in and find your location, click the map and actually set the pen and that’s going to give you the latitude and longitude, we’ll go ahead and hit Save.

Now we have our Geolocation Field displaying the latitude and longitude. Not really too useful, the goal here is to display some type of map so we’re going to come to our listing content type and go into Manage Display; and here you can see there’s a bunch of different formats to select, you could select Latitude Longitude, Static Google Map, Dynamic or HTML 5 Map Image.

So we’ll start with that one and we’ll just go through a couple of different options here; so if I refresh you can see it’s just a Static Image using HTML 5 with a little point on the map, we can go to a Static Google Map and here you can click the little settings wheel and put in the dimensions on a specific icon if you want to use a different icon image, what type of image formats, what type of map type, the zoom level, a whole bunch of different options which is pretty cool, go ahead and save it, refresh, we have a static map here, we can also go and use the Dynamic Map and in this case we’ll go ahead and say we want to zoom out a little bit more, so we set the zoom level to 4, refresh the page, you can see now we have a Dynamic Google Map, you can zoom in and zoom out, change the map type all on a standard Drupal Content Type using the Geolocation Field Module.

So go ahead and try it, see if you could find uses for it on your site and maybe it’s on a contact form page or business listing site or really anything. It’s not something you probably going to need on website you build but if you do have the need to display a dynamic map on your site I haven’t found any module that does it better than this one. So go ahead and give it a try, thanks for watching the Daily Dose of Drupal and we’ll be back again tomorrow with another Drupal topic, thanks for watching.


Hi, I do believe this is an excellent website.

I stumbledupon it ;) I am going to come back once again since i have book marked
it. Money and freedom is the greatest way to change, may you be rich and continue to help others.

Love this module! Geolocaton Field works well as a front-end to "IP Geolocation Views and Maps" , http://drupal.org/project/ip_geoloc, interfacing to three map rendering engines (Google, OpenLayers and the lightweight Leaflet) and providing multiple centering options. Also has the concept of a Differentiator to colour location markers based on any field in your View, eg taxonomy term, number of rooms, age, anything really. Finally "IP Geolocation Views and Maps" also supports the beautiful marker-clustering algorithm supplied by the "Leafter MarkertCluster" module.

Anyone have an idea of how to build a map with multiple markers using the module?

For instance Crossfit has an affiliate finder map that uses Google Maps and multiple markers - http://map.crossfit.com/

I would like to build something like this that automatically displays a marker for the location information our instructors enter in their profile information. (i.e. I don't want to have to manually update the map every time we get a new instructor or they change their location).

Hi Shane, Fantastic tutorial. Its relevant even in 2015. I've seemed to hit a roadblock. I need to capture the generated static map view so that I can send it to my mobile app. Is there anyway we can do this? Thanks Shane and keep up the good work. Cheers :-)

Interesting. So do you need to display the map dynamically on your Drupal site, but also send the static image to your Mobile app? With a little more background I might be able to give you some ideas. I am guessing there is a PHP function in the geolocation module that could be exposed and made accessible in some way to your mobile app, but it would probably take some custom module development.

It also may be possible that you could create a Drupal view that outputs the correct static map, and this map could be downloaded by your mobile app.

It all depends on a number of factors. Is this a native mobile app, or is this a mobile website? Any extra information would be great. Also feel free to use my contact form if you think that would work better to continue the conversation.

Thanks for the prompt reply Shane, I used the combination of Co-ordinates and the StaticMap API to send across the png to my mobile app. Thank you once again.

Post new comment