Search the Community
Showing results for tags 'markers'.
Found 1 result
-
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....
