Jump to content
Sign in to follow this  
dumb2champ

google map marker with auto refresh in php ajax

Recommended Posts

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....

Share this post


Link to post
Share on other sites

You need to look at a solution that will move the actual market, not re-load the whole map area.

Load the updated lat/lon via json, then reset the marker position.

Share this post


Link to post
Share on other sites

how to reload/refresh the markers only every x second without affecting the map

anyone please help me out for the solution/example...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • 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.