Adding an Interactive Google Map to a Directory

Aug 11, 2011 3:15 pm

The following procedure describes how to add an integrated Google map to the detail view of a directory item. This interactive map lets visitors use many of the Google map features like zooming in/out, panning, and even Street View to locate the address. This directory works by using Freedom's Google Module to create geocoded latitude and longitude coordinates based on addresses entered into a directory.

Steps:

1. In Freedom, turn on the Google Module (no Google account required)

2. Create a directory with predefined address fields.

3. Edit the directory's configuration settings and check the "Geocode the address field for radius searches" checkbox.

4. In the default page layout, or whichever page layout will be used to display the map, include the following onload code to the body tag:

<body onload="init()">

(This ensures the map code is loaded properly.)

5. In the list or detail layout where you want to include the map, enter the following code:


<div id="map">
  <div id="map_canvas"></div>
  <a href="[[link_map]]" target="_blank">View Larger Map</a>
</div>

<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function init() {
      var map = new google.maps.Map(document.getElementById("map_canvas"), {
        scaleControl: true});
      map.setCenter(new google.maps.LatLng([[latitude]], [[longitude]]));
      map.setZoom(12);
      map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

      var marker = new google.maps.Marker({map: map, position:
        map.getCenter(),title: '[[name]]'});
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      var contentString = '<div id="mappop">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h3>[[name]]</h3>'+
        '<div>'+
        '[[address_1]]<br /> ' +
        <if [[address_2]]>'[[address_2]]<br /> ' +</if>
        '[[address_city]], [[address_state]] [[address_zip]] ' +
        '</div>'+
        '</div>';
       
      var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    }
</script>

Note that the script also includes the name and address fields in the popup for the map as well as a link under the map to the full Google Maps page for the location.

6. Include the following styles in your stylesheet. You can adjust the styles as needed to format/size the map as needed:

#map { width: 300px; padding: 20px; }
#map a { padding: 10px; display: block; text-align: center; }
#map_canvas { width: 300px; height: 300px; border: 1px solid #cccccc; }

7. Add items to your directory that include addresses.

Enjoy.