Embed a Google map with multiple pins

May 9, 2012 5:22 pm

Here are the steps to embed a google map with multiple pins on your lister:

- Create a custom module with an address field.

- In the custom module configuration check the box "Geocode the address field for radius searches (requires Google Account)"

- Turn on the "Google" module from within the Green interface "Toolbar" module

- Go to https://code.google.com/apis/console and log into your gmail account.

- Once into google apis, click services on the left side and turn on "Google Maps API v2"
- Then on the left menu of google apis, click "API Access"
- Look for your API key and copy it to paste in later.

- Now go to the head section of your default page layout on your websites and paste in:

<meta name="gmapkey" content="abcdefghijk" />

where abcdefghijk is, you should replace with your API key.

- Now go to your custom module's lister layout.

- In the Body section of your lister type in:


<script src="http://n01se.net/gmapez/gmapez-2.js" type="text/javascript"></script>

<div class="GMapEZ GSmallMapControl GMapTypeControl" style="width: 500px; height: 500px;">
         [[repeat]]
</div>

- In the Item section of your lister type:

<if [[latitude]]>
<a href="http://maps.google.com/maps?ll=[[latitude]],[[longitude]]"> </a>
<div>[[name]]</div>
</if>

Your lister should now show a map with multiple pins if there are items in the blue interface with address fields filled out.

Additional information about pop up windows (once you click on the pin) can be found here:

http://n01se.net/gmapez/infowindows.html

May 10, 2012 12:04 pm

We've utilized this system with our clients in the past and they have been very happy. You can also add color markers for different location types or give the option to the client to choose a color marker.

To do this, create a new predefined field within your custom directory. In my example, I used [[misc1]] with a title of "Map Marker Color". Within Lookups, predefine your selections to make it a drop-down menu for the user to choose. Once you've done that work, navigate to your Lister Layout and within "Item", drop this code in place of the standard <a> tag:

<a title="[[name]]" href="http://maps.google.com/maps?ll=[[latitude]],[[longitude]]">
<if [[misc1]] = "Orange">ORANGE</if>
<if [[misc1]] = "Purple">PURPLE</if>
<if [[misc1]] = "Yellow">YELLOW</if>
<if [[misc1]] = "Green">GREEN</if>
<if [[misc1]] = "Aqua">AQUA</if>
<if [[misc1]] = "Red">RED</if>
</a>

NOTE: Remember to download the map marker pack. I can't find the URL at the moment, so here's a public link from my dropbox: https://www.dropbox.com/sh/x5mhrmzx5gv4ut8/AnvGK8qgxY/Developer%20Tools/GMapEZ%20Map%20Markers

Once downloaded, upload the markers in a directory of your File Manager, and within the JS file, specify the location of the colored markers in this section (I chose a path of graphics/markers in this instance):

var imgBase = 'graphics/markers/';

One last final tip for the markers: They can actually be any color or any image you want. You can alter those images to your desire, HOWEVER, you must keep the naming convention the same within the File Manager and within the code that refers to these markers.

Let's make some awesome maps! Hope that helps, too!

-Gwen

Oct 14, 2014 5:04 pm

Hey, has anyone been able to make this work with v3 of the Google maps API? All the maps that I had going stopped working once v2 API expired. I tried generating a new maps API key, but I still can't get it to work. Anyone figure this out?