I have been building websites for about 2 years and I specialize in websites built with Drupal 7. I have a few community sites that have locations, and I needed a good solution to manage all of the data points.
I had been using Google maps, and just embedding the code directly into my websites. This method is not very maintainable, and frankly people were using my maps on their websites and stealing my traffic.
I came across the GMAP module for Drupal. It scared me a little bit as the GMAP module for Drupal is still in the development phase (as are some support modules for GMAP), but with a little help from the Drupal community I was assured it worked well (and I was not disappointed). It is a little tricky, so I have step by step instructions on how to get GMAP to work properly.
One of the websites with GMAP installed shows dog park locations, reviews and videos (DenverWags.com). I have added GMAP to this website to dynamically create maps for regular dog parks, small breed dog parks, and the right menu link. This is done with the magic of views, GMAP and tags. We cover GMAP for Drupal 7 in this article.
This article assumes knowledge of installing Drupal and modules.
Getting GMAP to work for Drupal 7
The main thing that may stump someone from getting the GMAP module to work, is that one must enter the Longitude and Latitude of the location. The GMAP module must also be configured with a Google API Key. Do not worry if you are using a localhost url, Google will accept this as a url.
Below is a step by step example of getting GMAP to work in Drupal 7. Some of these modules are in development phase, but they work very well.
In this example we are adding two locations to a local development site.
1. Download, install and enable the Drupal GMAP, Views, Devel_generate, CTools and Location modules for Drupal 7
2.Create content type: Structure -> Content types -> Add content type
In this example we are creating a type called “foo” Publishing options: Uncheck “Promoted to front page” Display setting: Uncheck “Display author and date information” Comment settings: choose “closed” Locative information: Choose “allow” for city and state. “Force default” for county. Hide fields from display: check “Coordinates”
3. Add Content
a. Choose your new content type “foo”
b. Go to “Location” at the bottom
c. Create content with title “Location 1″. Fill in the Latitude and Longitude
i. To acquire the longitude and latitude in Google Maps right click on a location and choose “what’s here”, and click on green arrow. I used Latutitide “39.804316” and Longitude ” -105.211029″.
d. Create content with title “Location 2″ with prior instructions. I used Latutitide “39.578173” and Longitude “-104.757843″.
4. Add view
a. Structure -> View -> Add view -> Create a page
b. View name: Location
c. Machine-readable name: location
d. Page title: Locations
i. Display format: Gmap
ii. Of: Full posts
iii. Without links
iv. Without comments
v. Items per page: 99
e. Create a menu Link
i. Menu: Main menu
ii. Link Text: Location
5. Save and exit
6. You will see a lot of errors, that is OK
7. Configuration -> Web Services, GMAP
a. Get and enter Google Maps API Key. For my development site my url is http://localhost/GMAP. Generate API Key (you must be logged in to Gmail). Grab the first Key, and ignore the rest of the page. Paste this key in the section titled “Google Maps API Key”.
8. Move map to a desired default map setting.
9. Save configuration
You should have a map with your two locations on the menu link you created. Please email me if you have any questions.