Geocoder and two different Tables

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

By mbareara - July 18, 2019 - edited: July 18, 2019

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, 2019 - edited: July 20, 2019

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.

By mbareara - July 20, 2019

<?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>

By gregThomas - July 22, 2019

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

By mbareara - July 22, 2019

as usual... you'right! 

Thank You Greg!