liphoso 0 Light Poster

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.