<?php header('Content-type: text/html; charset=utf-8'); ?> 
<?php
  // load viewer library
  $libraryPath = 'cmsAdmin/lib/viewer_functions.php';
  $dirsToCheck = array('','../','../../','../../../','../../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
?> 
<?php if (!@$GLOBALS['GEOCODER_PLUGIN']) { die("You must activate the Geocoder plugin before you can access this page."); } ?> 
<?php 

  // get records 
  list($attractionsRecords, $myMetaData) = getRecords(array( 
    'tableName' => 'theTableName', 
  )); 

?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Show map with multiple addresses (using Google Maps API V3)</title> 
<style type="text/css"> 
  body, td { font-family: arial; font-size: 14px; } 
</style> 

<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $myRecords if needed --> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() { 
  var mapCanvasId = 'map_canvas'; 
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP }; 
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions); 
  var bounds      = new google.maps.LatLngBounds(); 
  var infowindow  = new google.maps.InfoWindow(); 
<?php 
foreach ($attractionsRecords as $record) { 
  if (!$record['latitude'] || !$record['longitude']) { continue; } 
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'"; 
  print "  _geocoder_addMarker($jsFunctionArgs);\n"; 
} 
?> 

  // 
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) { 
    var latLng       = new google.maps.LatLng(latitude, longitude); 
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum); 
    var marker       = new google.maps.Marker({ map: map, position: latLng }); 
    google.maps.event.addListener(marker, 'click', function() { 
      if (infowindowEl) { 
        infowindow.setContent(infowindowEl.innerHTML); 
        infowindow.open(map, marker); 
      } 
      else { 
        window.location = detailLink; 
      } 
    }); 
    bounds.extend(latLng); 
  } 

  // 
  map.fitBounds(bounds); 
} 

</script> 
<!-- STEP1: Map with multiple addresses --> 


</head> 


<!-- STEP2: Map with multiple addresses: add this to body tag: onload="initialize() --> 
<body onload="initialize()"> 
<!-- STEP2: Map with multiple addresses --> 


  <h1>Show map with multiple addresses (using Google Maps API V3)</h1> 


  <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $myRecords if needed --> 
  <?php $hasAddresses = array_filter(array_pluck($attractionsRecords, 'latitude')); ?> 
  <?php if ($hasAddresses): ?> 
    <div id="map_canvas" style="width: 299px; height: 299px; float: left; margin: 0px 15px;"></div> 
  <?php endif ?> 

  <?php if (!$hasAddresses): ?> 
    <div style="width: 299px; height: 299px; float: left; margin: 0px 15px; border: 1px solid #000;"> 
      <div style="text-align: center; padding-top: 135px"> 
        No map available! 
      </div> 
    </div> 
  <?php endif ?> 
  <!-- STEP3: /Map with multiple addresses --> 


  <p>TIP: Click on markers for more details.</p> 


  <!-- STEP4: Map with multiple addresses: Set the popup window content, rename $myrecords if needed --> 
  <div id="marker_details" style="display: none;"> 
    <?php foreach ($attractionsRecords as $record): ?> 

      <?php // marker_infowindow_### is the content displayed in the info-window on click ?> 
      <div id="marker_infowindow_<?php echo $record['num']; ?>"> 
        <h3><?php echo htmlspecialchars( @$record['address']); ?></h3> 
        Add any extra content you like here...<br/> 
        <a href="<?php echo $record['_link']; ?>">details</a> 
      </div> 

    <?php endforeach ?> 
  </div> 
  <!-- STEP4: Map with multiple addresses --> 


</body> 
</html> 