2

After every 30 seconds, I wish to reload the location on the google map without reloading the map. I've done the following :

  1. Fetch the contents from the gps device using its URL.
  2. get the latitude and longitude from the Url.
  3. Show the latitude and longitude on the map.

My code is: 

 <?php
    // hard coded latitude and longitude for an example
    $latitude = 28.70956;
    $longitude = 70.00767;
//In my code i have to fetch it from url every 30 seconds. And then Show them on the map
?>

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
        <script type="text/javascript">
        var map;
        function initialize() {
            // Set static latitude, longitude value
            var latlng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
            // Set map options
            var myOptions = {
                zoom: 16,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            // Create map object with options
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        <?php


                echo "addMarker(new google.maps.LatLng(".$latitude.", ".$longitude."), map);";
        ?>
        }
        function addMarker(latLng, map) {
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                draggable: true, // enables drag & drop
                animation: google.maps.Animation.DROP
            });

            return marker;
        }
        </script>
    </head>
    <body onload="initialize()">
        <div style="float:left; position:relative; width:1519px; border:0px #000 solid;">
            <div id="map_canvas" style="width:950px;height:900px;border:solid black 1px;"></div>
        </div>
    </body>
</html>

In this code, I am doing all the steps of getting the location and showing it on the map. But how can I get the location dynamically after a fixed period of time? My question does not contain any hard-coded values and every time the values need to be fetched from the URL.

David Ferenczy Rogožan
  • 23,966
  • 9
  • 79
  • 68
infinity26
  • 45
  • 1
  • 6
  • 1
    possible duplicate of [Google Map v3 auto refresh Markers only](http://stackoverflow.com/questions/14771422/google-map-v3-auto-refresh-markers-only) – Criesto Sep 08 '15 at 11:09

1 Answers1

2

You could use a combination of setInterval and an Ajax call. If you're php variables are changing each time you need to grab the data with Ajax without a page load. Something like this (if you're using JQuery).

setInterval(function() {
    var coords = getLatLng(); // Grab the coordinates from url
    updateMapMarker(coords); // Similar to what you've got
}, 30000); // 30 seconds

function getLatLng() {
    $.ajax({
        url: "your/route/that/returns/coordinates",
        success: function(data) {
            return [data.x, data.y];
        },
    });
}

Check here for JQuery Ajax: http://api.jquery.com/jquery.ajax/

Mr Office
  • 290
  • 1
  • 9