<?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."); exit; }


  // get records
  list($myRecords, $myMetaData) = getRecords(array(
    'tableName'   => $GLOBALS['GEOCODER_SAMPLE_TABLENAME'],
    'where'       => whereRecordNumberInUrl(1),
    'limit'       => '5',
  ));

  // show error message if no matching record is found

?>
<!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 single address</title>
<style type="text/css">
  body, td { font-family: arial; font-size: 14px; }
</style>


  <!-- STEP1: Map with single address: Put this in the <head> of your page, rename $record if needed -->
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

  <script type="text/javascript">
      $.noConflict();
  </script>

  <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 initializeMap(properties, elementToAppendTo = jQuery("body")[0]) {

          $ = jQuery;

          properties = {
              mapOptions : { mapTypeId: google.maps.MapTypeId.ROADMAP },
              latitude : properties.latitude,
              longitude : properties.longitude
          };

          rawDOM = $("<div class='map-canvas' />");

          var latitude    = properties.latitude;
          var longitude   = properties.longitude;

          if (latitude) {
              var mapOptions  = properties.mapOptions;
              var map         = new google.maps.Map(rawDOM[0], mapOptions);
              var latLng      = new google.maps.LatLng(latitude, longitude);
              var marker      = new google.maps.Marker({map: map, position: latLng });

              rawDOM.appendTo(elementToAppendTo);

              map.setCenter(latLng);
              map.setZoom(14);
          }

          return {map: map, properties: properties};
      }
      jQuery(function($){
          $(document).ready(function(){
              <?php foreach($myRecords as $record): ?>

              map = initializeMap({latitude: <?php echo floatval(@$record['latitude']); ?>, longitude: <?php echo floatval(@$record['longitude']); ?> },$("#maps_container"));

              
              <?php endforeach; ?>
          });
      });
      

  </script>
  <!-- /STEP1: Map with single address -->


</head>


<!-- STEP2: Map with single address: add this to body tag: onload="initialize() -->
<body>
<!-- STEP2: Map with single address -->


  <h1>Show map with single address</h1>

  <div id="maps_container"></div>

  <style type="text/css">
      .map-canvas{width: 500px; height: 500px;margin-bottom:30px;}
  </style>

</body>
</html>
