How to Display Maps using GMap, Views and Location in Drupal 7

/ By / 4 minutes of reading / 37 Comments

In part one (How to Store Addresses in Drupal 7 Using Location Module), we configured Location to store and geocode addresses.

We used “Location CCK” that ships with Location, to define a custom address field on the Article content type. This field allows us to enter in a postal address and then Location stores the address and geocodes it. Now we need to display the address in an actual map.

In this tutorial, we’ll use two modules to create our map: Views to build a block and GMap for the actual map.

The map that we’ll create will be fairly basic. The block will only be visible on the article page if an address is entered in.

Below is an image of the finished product:

Fig 1.9

If you’re looking for other mapping modules, then check out IP Geolocation Views & Maps. If you know of any other modules that integrate well with Location, leave a comment below.

Getting Started

I’ll assume that you have read part one, and most importantly you downloaded and installed all required modules.

Create Block View

Let’s jump right in and create a block view for our map.

1. Go to Structure, Views and click on “Add new view”.

2. Fill in the “Add new view” form with the values defined in Table 1.0.

Table 1-0. Create a new view

Option Value
View name Article map
Machine name article_map
Show Content (default)
Of Type All (default)
Create a page Unchecked
Create a block Checked
Display format GMap

Fig 1.0

3. Click on Settings next to GMap in the Format area to configure the map.

Fig 1.2

4. Make sure that the “Data Source” is set to “Location.module”. Also, you can change what the marker looks like by selecting a different one from the “Marker / fallback marker to use” drop-down list.

Fig 1.1

Once everything has been configured click on Apply.

Add Contextual Filter

The next important piece to the puzzle is a contextual filter. We’ll add a filter so that the view only displays the address of the article that is being viewed.

1. Click on the Advanced link on the right, and then click on the Add button next to “Contextual filters”.

Fig 1.3

2. Search for “nid”, select “Content: Nid” and click on Apply.

Fig 1.4

3. We need to configure the contextual filter to use the content ID in the url.

This can easily be achieved by choosing the “Provide default value” radio button and then select “Content ID from URL” from the Type drop-down list.

Fig 1.5

At this point, we have a working view. Now all we need to do is add the view to a region and test it to make sure it works.

Save the view and then go to Structure, Blocks and assign the “View: Article map” block to a region.

Fig 1.6

Now head over to an article that has an address. You should see a map in the specified region.

Fig 1.7

How to Configure the Map

As you can see, the map works, but I had to zoom all the way out to see the marker. Let’s now configure the map so that it centers on the marker and sets an appropriate zoom level.

1. Go back to the edit page for the view and click on Settings next to GMap.

2. You can configure the map’s width, height and zoom-level by defining a macro.

For this tutorial, copy and paste the macro below into the macro text-area.

[gmap zoom=10 |width=100% |height=200px]

Fig 1.9

If you need help with defining macros then look at the “GMap Macro Builder” sub-module.

3. Scroll further down on the settings page and check the “Center on node argument” checkbox. This will make sure that the map centers on the marker.

Fig 1.9

Save the settings options and the view. Now if you go back to the article page you should see a more usable map, centered and zoomed in at the right level.

Fig 1.10

How to Display Multiple Markers on a Map

Adding multiple Markers to a map is pretty easy. Just configure Location to allow you to store more than one address.

In part one, we used the “Location CCK” module, so all you have to do is change the field’s “Number of values” to unlimited.

Fig 1.11

This will then allow you to add multiple addresses.

I also recommend that you change the zoom value in the macro so you can see both markers.

Here is the updated macro code:

[gmap zoom=8 |width=100% |height=200px]

Here’s what the map looks like with multiple markers:

Fig 1.12

That’s it for our two part series on Location and GMap. As you have seen, both modules work brilliantly together. With relatively little work: you can store addresses and create pretty decent maps in fairly little time.

If you have any questions, please leave a comment.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

37 thoughts on “How to Display Maps using GMap, Views and Location in Drupal 7”

  2. Jess

    Your tutorial was extremely helpful! Thank you very much.

    I was enabling the ability to have multiple addresses on the map (displaying multiple pins on the map). The issue I’m running into is if I have two address on the node, the map will display two pins, but when you click on a pin, you’ll see all addresses on each pin popup. Is is possible to correlate the addresses with one pin?

    Reply
    1. ivan

      Sorry I’m not sure what the problem is. I recommend that you ask this question in the GMap issue queue and see if they can help.

      Reply
  4. Mary Ann

    In your tutorial, the article drives the map.
    I would like the map to drive the displayed contents.
    To be specific, I want a map with location information displayed beside it. When you click on a map marker, the adjacent information should change to be the location of the clicked marker. So, it works like the info window, just positioned outside the map.

    Can you make the marker location the contextual filter for the location field display?

    Reply
  5. Ravipati Koteswararao

    Hi Ivan,
    Is there any way to implement navigation system using Drupal?.If you have any could you please share to me.

    Regards,
    Koti

    Reply
  7. Abhijeet

    I have used gmap for show locations on my page. I have added more than 50 location. However, in map there are showing only 10.
    Please given me an idea that how can I show my all locations on Map.

    Thanks

    Reply
      1. Abhijeet

        I have already set the use pager: Display all items | All items.
        Is it correct?
        However, still only 10 locations are coming.

        Reply
      2. Abhijeet

        Thanks for your support Ivan.
        I was setting the pager under block. However, when we create map for our locations at that time we create a attachment for show the location on single map. And at that section we need to use pager and display All item or any specific numbers of items.

        Thanks

        Reply
        1. ivan

          Make sure you’re configuring the right Views display. If you’re still having problems then you’ll need to debug further.

          Reply
    2. Abhijeet

      Hi,
      I have found a alternative option few months ago that is you can overwrite your current marker image which you have saved as per your current setting of gmap. Go to the marker images folder and replace any image with your custom image keeping same name (overwrite) and then in Gmap setting assign the same image for markers.
      I hope it will help you.

      Reply
  10. Brian

    I want to display a list of 100 or so locations. However, I also want to show them with different color markers based on the location type taxonomy. I have created new vocabulary in location type taxonomy and uploaded an icon there, but when I get to my map page, no pins show up.

    Reply
      1. Brian

        I guess I should have been more specific. I have created 100 or so nodes of businesses I want to map them on one map. The have a value in them called location_type. This is one of 5 different types of locations/statuses. I have added an icon for each type, and I created a filter that shows the icons and the types. I can check the boxes for the ones i want to display, but no matter what nothing ever displays. I am trying to figure out why.

        Reply
  11. Gianluca

    Hi,
    i’m working with gmap 7x-2.9 and same release of gmap macro builder. I need to display a popup on every marker but this: [gmap markers=orange::42.51921826933966,14.113261171005433:popup test | zoom ……..] not working. My node text format is: “gmap macro” . Can u give me a tip? I have read the documentation at https://www.drupal.org/documentation/modules/gmap/macros under “overlay” section. Where i wrong? thak you for your work.

    Reply
  12. Sylvain

    Hello

    I followed your two parts of this tutorial and it worked great.

    Until accessing the general configuration of GMAP (Configuration / GMAP). Here, we can set the default coordinates for example. But when I save and go back to my article, the coordinates are no longer the one from my article but the ont from the configuration Gmap.

    I needed to disable some options in the main Gmap configuration. That’s why I was going there.

    How to make that my Gmap block takes the address entered inside the article, not in the default configuration ?

    Thansk if you can help me

    Reply
    1. ivan

      Hi Sylvain,

      Have you created the block using views and are you passing in the node ID via a contextual filter? Also, make sure the Location module has been setup and that you’ve set “Location.module” as the “Data Source” in views.

      Reply
  13. Sylvain

    Hi

    Thanks for your answer. I have created the block with views and initially I have put a contextual filter. But I removed the contextual filter because I need my Gmap to be visible from all pages of my website.

    My data source is well set as Location.module as the Data Source un views.

    Everythink worked fine until I go inside Configuration / Web Services / GMap.
    I tried to erase the value inside the field Default Center and save. Now the google maps preview in this panel is always gray and the value inside Default Center always set to 48.85661400000001,NaN, even if I change the value of NaN.

    I tried to change that from phpMyAdmin but all the values are inside a BLOB.

    I’m stuck and really don’t know what to do 🙁

    Reply
  14. ivan

    > Thanks for your answer. I have created the block with views and initially I have put a contextual filter. But I removed the contextual filter because I need my Gmap to be visible from all pages of my website.

    You need the contextual filter. Views needs to get the node ID from the URL for the map to appear. Without it Views has no idea where to get the location from.

    Do you want to display a single map across the whole site, or do you want to display a location entered on a per-node basis?

    Reply
  15. Sylvain

    Sorry for the late answer

    I need to display it on the whole site.

    I set the contextual filter but now since I have this NaN value on the default coordinates in the general administration, Nothing appears, event on the administration 🙁

    Reply
    1. ivan

      This tutorial focuses on displaying a map when you’re on a node page, “node/123”. For the contextual filter to work, you must be on a node page.

      Having a map appear across the whole site requires a different implementation. Look at using a static gmap macro.

      Reply
  16. Sylvain

    Yes I know. I made it work just by removing this contextual filter. My map appears on every page of my website.

    My real problem occured since I entered the general configuration.

    I would love to send you some screenshots by email.
    This NaN value on the general configuration page makes everything bug. It does not take anymore the configuration I put inside the Views config.

    I am really stuck and I have no solutions 🙁

    Reply

Leave a Comment

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

Scroll to Top