Jump to content

google map marker with auto refresh in php ajax

dumb2champ

By dumb2champ
in PHP Coding Help

Recommended Posts

dumb2champ Member

dumb2champ

Posted
Posted

Help me...:(

 

My objective is to reload the marker inside google map every 30s...

But the scripts below seem not running properly...

<?php
define('INCLUDE_CHECK',1);
include "dbconnect.php";
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <meta name ="audience" CONTENT="all">
		<meta name ="revisit-after" CONTENT="4 days">
		<meta name ="content-Language" CONTENT="English">
		<meta name ="distribution" CONTENT="global">
		<link rel="shortcut icon" href="favicon.png"/>
        <link rel="stylesheet" type="text/css" href="host_entry/css/demo.css" />
		<link href="host_entry/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script type="text/javascript" src="host_entry/js/jquery-1.7.1.min.js"></script>
		<script src="host_entry/js/bootstrap.min.js"></script>
		<!-- Google Map JS -->
		<script src="http://maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" type="text/javascript"></script>

<script>
//SCRIPTS TO RESFRESH THE MARKER...I THINK THIS IS INCORRECT...HELP!!!
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#result').load('index.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]>
</script>

</head>
        //to dislay the map
	<div id="map_canvas" style="top:55px;left:13px;"> <!-- Map will display -->
			<div id="map"> <!-- Fullscreen Loading & Fullscreen Buttons area -->
				<span style="color:Gray;">Loading map...</span>			  
                        </div> 
			<!-- Fullscreen Loading & Fullscreen Buttons area Ends -->
        </div><!-- Map Ends display -->
	
<script type="text/javascript">

var locations = [
		<?php
			$query="SELECT * from host_entry";
			$result=mysql_query($query)or die(mysql_error());
			{ 
			
				if ($num=mysql_numrows($result)) 
				{
					$i=0;

					while ($i < $num) 
					{
						$id=mysql_result($result,$i,"id");
						//$host_type=mysql_result($result,$i,"host_type");						
						$host_name=mysql_result($result,$i,"host_name");
						$host_status=mysql_result($result,$i,"host_status");
						$host_lapt=mysql_result($result,$i,"host_lapt");
						$host_long=mysql_result($result,$i,"host_long");
						
	if($host_status==0) 
	    echo "[
'<div id=result><div class=info style=text-align:center;><h4>$host_name</h4></div></div>', $host_lapt, $host_long],";
	         $i++;
			}
		        }else {
echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
			}
			}
		?>
];

//FROM HERE TO SET THE MARKER IMAGE
    // Setup the different icons and shadows
    var iconURLPrefix = 'host_entry/img/'; 

    var icons = [  
	  iconURLPrefix + 'p_red_alert.png'
    ]
	var icons_length = icons.length;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: -5,
	  center: new google.maps.LatLng(3.1215681, 101.71180140000001),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
	  disableDefaultUI: true,
      panControl: false,
      zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400,
	  maxHeight: 350,
	  
    });
	

    var marker;
    var markers = new Array();
    
    var iconCounter = 0;

//I THINK THE PROBLEM START HERE...
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
        map: map,
		animation: google.maps.Animation.BOUNCE,
        icon : icons[iconCounter],
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= icons_length){
      	iconCounter = 0;
      }
    }
    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();
	google.maps.event.addDomListener(window, 'load', initialize);
  </script> 
		<?php
//include "includes/footer.php";
?>
    </body>
</html>

Is there a way to reload the marker with the ability of ajax towards the markers

Help me for the solution...

Thanks....

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.