6 posts by 2 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: July 22   (RSS)

By mbareara - July 18 - edited: July 18

Goodevening 

is it possible to have only one map but with items from two different tables? 

For example in a same map  RESTAURANTS and BAR or HOTEL ?

Thank you in advance  for your answer 

Orazio

By mbareara - July 20 - edited: July 20

WOW! THank you Greg!

now i have all the markers form the two tables on map... but... when i click on the markers, both restaurants and bars give me information (name, link etc) about restaurants. Of course on restaurants is correct, on bars... no.

<?php 
  // load viewer library
  $libraryPath = '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."); }

  // error checking
  if (!@$GLOBALS['GEOCODER_PLUGIN'])         { die("You must activate the Geocoder plugin before you can access this page."); }
  if (!@$GLOBALS['GEOCODER_GOOGLE_API_KEY']) { die("You must have a Google Maps API key to display a map, see the readme file for instructions on getting one."); }

  // get records
  list($ristoranti, $myMetaData) = getRecords(array(
      'tableName'   => 'ristoranti',  
  ));
 list($birrifici, $myMetaData) = getRecords(array(
    'tableName' => 'birrifici',
  ));

?>
<!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" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>Show map with multiple addresses</title>
<style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }
      #map {
        height: 400px;
        width: 100%;
      }
      #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }
      #legend h3 {
        margin-top: 0;
      }
      #legend img {
        vertical-align: middle;
      }
    </style>

<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $myRecords if needed -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo htmlEncode($GLOBALS['GEOCODER_GOOGLE_API_KEY']); ?>"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions, {
          zoom: 10,  });
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();
	var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
<?php
foreach ($ristoranti as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
foreach ($birrifici as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($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>How To Sicily - Restaurant Reviews Map</h1>


  <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $myRecords if needed -->
<?php $hasAddresses = true; ?>
  <?php if ($hasAddresses): ?>
    <div id="map" style="width: 1200px; height: 500px;; float: left; margin: 0px 15px;"></div>
  <?php endif ?>

  <?php if (!$hasAddresses): ?>
    <div style="width: 1200px; height: 500px;; 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 ($ristoranti 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 htmlencode( @$record['address']); ?></h3>
        add content you like here...<br/>
        <a href="<?php echo $record['_link']; ?>">details</a>
      </div>

    <?php endforeach ?>
	     <?php foreach ($birrifici 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 htmlencode( @$record['address']); ?></h3>
        add any extra content you like here...<br/>
        <a href="<?php echo $birrificirecord['_link']; ?>">details</a>
      </div>

    <?php endforeach ?>
	  
  </div>
  <!-- STEP4: Map with multiple addresses -->


</body>
</html>

Hey Orazio,

The issue is that some of the records share the same num value, and this is being used to detect which HTML content needs to be displayed when a marker is clicked on. I've updated your code in a way that should fix the problem:

<?php 
  // load viewer library
  $libraryPath = '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."); }

  // error checking
  if (!@$GLOBALS['GEOCODER_PLUGIN'])         { die("You must activate the Geocoder plugin before you can access this page."); }
  if (!@$GLOBALS['GEOCODER_GOOGLE_API_KEY']) { die("You must have a Google Maps API key to display a map, see the readme file for instructions on getting one."); }

  // get records
  list($ristoranti, $myMetaData) = getRecords(array(
      'tableName'   => 'ristoranti',  
  ));
 list($birrifici, $myMetaData) = getRecords(array(
    'tableName' => 'birrifici',
  ));

?>
<!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" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>Show map with multiple addresses</title>
<style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
      }
      #map {
        height: 400px;
        width: 100%;
      }
      #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }
      #legend h3 {
        margin-top: 0;
      }
      #legend img {
        vertical-align: middle;
      }
    </style>

<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $myRecords if needed -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<?php echo htmlEncode($GLOBALS['GEOCODER_GOOGLE_API_KEY']); ?>"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions, {
          zoom: 10,  });
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();
	var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
<?php
foreach ($ristoranti as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, 'r{$record['num']}', '" .jsEncode($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
foreach ($birrifici as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, 'b{$record['num']}', '" .jsEncode($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>How To Sicily - Restaurant Reviews Map</h1>


  <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $myRecords if needed -->
<?php $hasAddresses = true; ?>
  <?php if ($hasAddresses): ?>
    <div id="map" style="width: 1200px; height: 500px;; float: left; margin: 0px 15px;"></div>
  <?php endif ?>

  <?php if (!$hasAddresses): ?>
    <div style="width: 1200px; height: 500px;; 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 ($ristoranti as $record): ?>

      <?php // marker_infowindow_### is the content displayed in the info-window on click ?>
      <div id="marker_infowindow_r<?php echo $record['num']; ?>">
        <h3><?php echo htmlencode( @$record['address']); ?></h3>
        add content you like here...<br/>
        <a href="<?php echo $record['_link']; ?>">details</a>
      </div>

    <?php endforeach ?>
	     <?php foreach ($birrifici as $record): ?>

      <?php // marker_infowindow_### is the content displayed in the info-window on click ?>
      <div id="marker_infowindow_b<?php echo $record['num']; ?>">
        <h3><?php echo htmlencode( @$record['address']); ?></h3>
        add any extra content you like here...<br/>
        <a href="<?php echo $birrificirecord['_link']; ?>">details</a>
      </div>

    <?php endforeach ?>
	  
  </div>
  <!-- STEP4: Map with multiple addresses -->


</body>
</html>

I've updated the ID's on the hidden markers so that they are unique again by prefixing them with either b or r depending on if they're restaurants or bars.

Cheers,

Greg

Greg Thomas
PHP Programmer - interactivetools.com

as usual... you'right! 

Thank You Greg!