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.
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:
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.
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
|View name||Article map|
|Of Type||All (default)|
|Create a page||Unchecked|
|Create a block||Checked|
3. Click on Settings next to GMap in the Format area to configure the map.
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.
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”.
2. Search for “nid”, select “Content: Nid” and click on Apply.
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.
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.
Now head over to an article that has an address. You should see a map in the specified region.
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]
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.
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.
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.
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:
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.