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.