Mar 20, 2013

Drupal Quick Tip: Create a Google map with Custom markers on Drupal in just 5 steps


1. Get the Latitude and Longitude of your map
  • Go to http://www.satsig.net/maps/lat-long-finder.htm  and enter in the address. Click Go!
2. Get the API Key for your site
  • Go to https://developers.google.com/maps/signup and enter in the website URL, then generate a key (this will need to be done twice, once for the dev site and again when we knew the live URL.

3. Get the JS code for to place it in you block
  • Go to http://mapmaker.donkeymagic.co.uk/ and enter in the Latitude and Longitude [Step 1]. 
  • Give the marker a name such as "myMarker". 
  • Enter in the address into the Popup Content box.
  • Click Add marker.
  • Then click the"Share map" button
  • Select JavaScript tab and you will see code generated. Copy that code.
4. Go to your Drupal site and add new block. Paste in the code. On the 7th line, it says key= and then some numbers and letters. Replace that entire line with the key you generated.
  • Then within the function loadMap(), replace:
    •  icon0.image = "http://www.google.com/mapfiles/marker.png"; icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
    • with
      • icon0.image = "/sites/all/themes/THEMENAME/images/MARKER-NAME.png"; icon0.shadow = "/sites/all/themes/THEMENAME/images/MARKER-SHADOW-NAME.png";
5.  Set the Block to the desired region/view.  And that's it ...!