Source Viewer

index.html : entry point, with only SSI (Server Side Include) statements

MySQL_Gmap.php : the PHP server side code that queries the database & builds the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Locator of People & Places</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Ron Miller" />
<?php include ("../inc/site_meta.ssi"); ?>
<style type="text/css" media="screen">	@import url( ../css/basic.css );
body { background:Linen; }
.outerTable { background:White; }
#Emplist {
  border:1px solid blue;
  height:380px;
  overflow:auto;
  width:550px;
}
</style>

function initialize() {
 return;
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

</script>

<?php
error_reporting(E_ALL);
ini_set('display_errors', 'On');

include_once("../inc/mysql2i.class.php");	// deprecated php5-mysql api to php7-mysqli

// ================================================================================

// connect to the MySQL DB server
			// --------------------------------------------------------------------
			// Server in the this format: <computer>\<instance name> or
			// <server>,<port> when using a non default port number
//			$server = 'localhost';
//			// Connect to MySQL
//			$dbconn = @mysql_connect($server, 'xxxx', 'xxxx');

$db_acct = 'main';	// set first so as to get the desired acct settings
            include('../../www-conf/DBaccounts.php');

$dbconn = @mysql_connect($hostname , $username, $password);

//			if (!$dbconn) {
//			    die('Something went wrong while connecting to MySQL');
//			}

if ($dbconn) {
			// open the database
			// --------------------------------------------------------------------
			mysql_select_db('personnel', $dbconn);

// fetch from the table with the names & locations
			// --------------------------------------------------------------------

// Send a select query to MySQL
			$sql = "SELECT * FROM whereabouts
					WHERE ACTIVE is true";

$result = mysql_query($sql, $dbconn);	// here is where we need the select we used on the week end
//var_dump($result);

// Check if there were any records
			if (!mysql_num_rows($result)) {
			    echo 'No records found';
			    exit;
			} else {

$peeps = array();
				while ($row = mysql_fetch_array($result)) {
			        // ...   here we format the data ... like calculating LAT & LNG
			        // puting the data we want into say ''$peeps'
					$name = $row['DisplayName'];
					$lat = $row['LAT'];
					$lng = $row['LNG'];
					$peeps []= array ('name' => $name, 'group' => $row['GROUP'], 'lat' => $lat, 'lng' => $lng);

}
			}
//print_r($peeps);

// Free the query result
			mysql_free_result($result);

// =================================================================================
} else { // no DB connection so let's show some sample data
	echo ("<h3>No DB connection could be made so some sample data only is being shown.</h3>");
	// FOR NOW SIMPLY:  setup an array with psuedo employee data
	$peeps = array(
		1 => array( 'name'=>"Ron & Sherry", 'group'=>'Home Company', 'lat'=>37.339, 'lng'=>-121.968 ),
		2 => array( 'name'=>"Daniel Miller", 'group'=>'Otis Head Office', 'lat'=>37.322, 'lng'=>-122.0057 ),
		3 => array( 'name'=>"Happy & Grumpy", 'group'=>'Road Crew', 'lat'=>37.319, 'lng'=>-121.981 ),
		4 => array( 'name'=>"Lina & Ron", 'group'=>'Road Crew', 'lat'=>37.4372, 'lng'=>-121.8845 ) );
}
//var_dump($peeps);	// lets first take a look at the data we've got , before trying to use it.

// create a js string to form an js array of the same data
	$jsarry = "peeps = [];\n";
	$i = 0;
	//foreach ($peeps as $peep) {
	for ($i=0; $i<count($peeps)-1; $i++) {   // had to +1 to avoid error whats-up? feb2013
	 	$name = $peeps[$i+1]['name'];
	 	$group = $peeps[$i+1]['group'];
	 	$lat = $peeps[$i+1]['lat'];
	 	$lng = $peeps[$i+1]['lng'];
		$jsarry .= "peeps[$i]=['$name','$group','$lat','$lng'];\n";
	}
//echo("JavaScript array asignment string:<br/>");
//var_dump($jsarry);

$jsarry = "peeps = [\n";
	foreach ($peeps as $peep) {
		$jsarry .= "[ '" .$peep['name']. "','" .$peep['group']. "'," .$peep['lat']. "," .$peep['lng']. "],";
	}
	$jsarry .= "]\n";
//var_dump($jsarry);

// ===========  initialization
	<?php echo $jsarry; ?>

// ========== local javascript functions

function mapit( lat, lng, name) {
        $('#col2head').html(name);
    	url = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lng + "&zoom=14&size=400x400&maptype=terrain&sensor=true"
// if nmae has special chars eg:& next line breaks
//		url += "&markers=color:blue|title:" + name + "|" + lat + "," + lng;
		url += "&markers=color:blu|" + lat + "," + lng;
		//alert(url);
		// first reinstate the html for the iframe's
//		html = "<iframe id='imap' width='460px' height='420px' >";
		html = "<img id='imap' width='460px' height='420px' />";
		$('#imap3').html(html);
		$('#imap').attr("src", url);
		alert("Google now require a billing account for this feature to work.");
	}

function map_them( center, zoom, loc_list) {
    	url = "http://maps.google.com/maps/api/staticmap?center=" + center + "&zoom=" + zoom + "&size=500x400&maptype=terrain&sensor=true"
		url += "&markers=color:blue|label:O|" + loc_list;
		//alert(url);
		// first reinstate the html for the iframe's
//		html = "<iframe id='imap' width='500px' height='450px' >";
		html = "<img id='imap' width='500px' height='450px' />";
		$('#imap3').html(html);
		$('#imap').attr("src", url);
	}

/*
    function diagOut(msg_str) {
		//alert(msg_str);
        document.getElementById("diagOut").innerHTML = msg_str;
         //document.getElementById("diagOut").innerText = msg_str;	// WORKS in CHROME !!!!!!!!
   }
*/

/*
* Sets up the dynamic Google Maps API
*/
function loadMap() {
//alert("about to load map.");
//alert (peeps);
  $('#col2head').html('All my Peeps');
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(-33.8739340, 151.1751510),
//    mapTypeId: google.maps.MapTypeId.ROADMAP
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }
  var map = new google.maps.Map(document.getElementById("imap3"),
                                myOptions);

//  setMarkers(map, beaches);

//add the store markerS

var storeMarkers = [
    [ 'Ashfield NSW',-33.889533, 151.125862],
    [ 'Haymarket NSW',-33.880777, 151.202796],
    [ 'Sydney NSW',-33.867139, 151.207114],
    [ 'Leichhardt NSW',-33.883793, 151.157057],
    [ 'Newtown NSW',-33.896449, 151.180013],
    [ 'Marrickville NSW',-33.910923, 151.157187],
    [ 'Drummoyne NSW',-33.851056, 151.154542]
  ]

var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < storeMarkers.length; i++) {
    var store = storeMarkers[i];
    var myLatLng = new google.maps.LatLng(store[1], store[2]);
//    bounds.extend(myLatLng);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: store[0],
    });
  }

for (var i = 0; i < peeps.length; i++) {
    var peep = peeps[i];
    var myLatLng = new google.maps.LatLng(peep[2], peep[3]);
    bounds.extend(myLatLng);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: peep[0],
    });
  }
  map.fitBounds(bounds);

}

</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<center><h2>MySQL Map of my Peeps  </h2></center>
<small> (works best with FireFox or Chrome)<br/>click on folk's names ... click button below ... try zooming into SF bay area ... mouse over a pin
</small>
<p>
<table class="outerTable" align="LEFT" cellpadding="3" cellspacing="3" border="1">
<tr>
	<td id="col1head" bgcolor=#FFCC99>What's the Where Abouts of:</td>
	<td id="col2head"></td>
</tr>
<tr>
	<td>
		<div id="Emplist">

<div align="CENTER">
		<table class="dataTable" cellpadding="3" cellspacing="3" border="0">
		<thead>
			<th>Who / Where / What</th><th>Category Type</th>
		</thead>
		<tbody>
		<?php
			$class = 'alt';
//for ($i=1; $i<10; $i++) {
			foreach ($peeps as $peep) {
			 	$action = 'onclick="mapit(' . $peep['lat'] . ',' . $peep['lng']  . ",'" . $peep['name'] . "'" . ')"';
				$html = "<tr class='$class' $action title='See me on the map.' td style=''><td style=''>" . $peep['name'] . " </td><td style=''> " . $peep['group'] . " </td></tr>";
				echo($html);
				if ($class =='alt') {
					$class ='normal';
				} else {
					$class ='alt';
				}
			}
//}
		?>
		</tbody>
		</table>
		</div>
		</div>

<?php
			$locs = '';
			// calculate the center of all the peeps
			$minLat=9999; $minLng=9999;
			$maxLat=-9999; $maxLng=-9999;
			foreach ($peeps as $peep) {
			 	if ($peep['lat'] < $minLat) $minLat = $peep['lat'];
			 	if ($peep['lat'] > $maxLat) $maxLat = $peep['lat'];
				if ($peep['lng'] < $minLng) $minLng = $peep['lng'];
				if ($peep['lng'] > $maxLng) $maxLng = $peep['lng'];
				$locs .= '|' . $peep['lat'] . ',' . $peep['lng'];	// meanwhile also gather all the Lat,Lngs
			}
			$centerLat = ($minLat+$maxLat)/2;
			$centerLng = ($minLng+$maxLng)/2;
			$size = max( ($maxLat-$minLat), ($maxLng-$minLng) );	// calc zoom level too
			$zoom = ( log(720.0/$size) / log(2.0) );
//echo("<br/>zoom=$zoom<br/>");
			// provide a button to see all peeps on one map
			$center = $centerLat . "," . $centerLng;
			$action = "onclick=\"map_them('$center', '$zoom', '$locs')\"";
			$html = "<input type='button' class='button' value='View All Peeps' $action />";
//var_dump($html);
//			echo($html);
		?>
			<input  style='font-size:12px; font-weight:bold;' type='button' class='button' value='View Peeps on Map' onClick="loadMap();" />
 <br/>
	</td>
	<td>
		<div id="filePreview"> </div>
		 <div id="imap3" style="width: 500px; height: 450px">
		 <iframe id="imap" width="500px" height="450px" ></div>
		</iframe>
	</td>
</tr>
</table>
</p>
<div id="diagOut"></div>
<p/>
<br/>    <div id="map_canvas" style="width: 450px; height: 450px"></div>

</body>
</html>

Viewing source code files from the server

which support rendering for: MySQL_Gmap

index.html : entry point, with only SSI (Server Side Include) statements

MySQL_Gmap.php : the PHP server side code that queries the database & builds the page