Please assist, I am trying to get get one page out of three to load a google map once its loaded. the code i have is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="600"/>
<title>Pollutions App</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDckf7xvmokSNwDe1BJcoII2d33K8GR1ew&sensor=false">
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:80%"></div>
<div data-role="page" id="page">
<div data-role="header">
<h1>Pollution Monitor</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#GoogleMaps">Google Maps View</a></li>
<li><a href="#TimeSeries">Time Series</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="GoogleMaps">
<div data-role="header">
<h1>Google Maps</h1>
</div>
<div data-role="content">
<?php
$con=mysqli_connect("localhost","root","","database");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$queryOne = mysqli_query($con,"SELECT Pollution FROM data WHERE Location = 'Pioneer_Kingsway'");
$queryTwo = mysqli_query($con,"SELECT Pollution FROM data WHERE Location = 'LakeSide'");
$queryThree = mysqli_query($con,"SELECT Pollution FROM data WHERE Location = 'Parliament_Kingsway'");
$Pioneer_Kingsway_Pollution = mysqli_fetch_array($queryOne);
echo $Pioneer_Kingsway_Pollution['Pollution'];
echo "<br>";
$LakeSide_Pollution = mysqli_fetch_array($queryTwo);
echo $LakeSide_Pollution['Pollution'];
echo "<br>";
$Parliament_Kingsway_Pollution = mysqli_fetch_array($queryThree);
echo $Parliament_Kingsway_Pollution['Pollution'];
echo "<br>";
mysqli_close($con);
?>
<script>
var infowindow = new google.maps.InfoWindow({content:"Hello World!"});
google.maps.event.addListener(Pioneer_Kingsway, 'click', function() {infowindow.open(map,Pioneer_Kingsway);});
var Pioneer_Kingsway_pollution = "<?php echo $Pioneer_Kingsway_Pollution['Pollution']; ?>";
var LakeSide_pollution = "<?php echo $LakeSide_Pollution['Pollution'];?>";
var Parliament_Kingsway_pollution = "<?php echo $Parliament_Kingsway_Pollution['Pollution']; ?>";
function initialize()
{
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [iconURLPrefix + 'green-dot.png',iconURLPrefix + 'blue-dot.png', iconURLPrefix + 'orange-dot.png'iconURLPrefix + 'red-dot.png',]
var icons_length = icons.length;
var myOptions = {center: new google.maps.LatLng(-29.313625688066217, 27.48076021671295),zoom: 14,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//Pioneer,Kingsway
Pioneer_Kingsway = new google.maps.Marker({position: new google.maps.LatLng(-29.313625688066217, 27.48076021671295),map: map, icon : icons[Pioneer_Kingsway_pollution]});
//LakeSide
LakeSide = new google.maps.Marker({position: new google.maps.LatLng(-29.3147029, 27.502102100000002),map: map, icon : icons[LakeSide_pollution]});
//Parliament,Kingsway
Parliament_Kingsway = new google.maps.Marker({position: new google.maps.LatLng(-29.315038289230856, 27.486897110939026),map: map, icon : icons[Parliament_Kingsway_pollution]});
}
</script>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="TimeSeries">
<div data-role="header">
<h1>Time Series</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The php loads and am able to get the values from my database but the map does not load.