dynamically populate google maps location from db

Question

i have a latitude and longitude of particular user in db .. i am getting the values by using jquery .. here is what i am doing

var auto_refresh = setInterval(
        function ()
        {
            $.get('http://localhost/Location/locate', function(data){

             $('.latitude').html(data.lat);
             $('.longitude').html(data.long);


             }, 'json');



        }, 1000);

when i was getting the location from php i was doing this

    'localize' => false,
    'latitude' => $latitude,
    'longitude' =>  $longitude,
    'address' => $address,
    'marker' => true,

now i am doing this but is giving me syntax error

      'latitude' => ?><div class = 'latitude'></div><?php ,
    'longitude' => ?><div class = 'longitude'></div><?php ,

and the other thing i like to ask is that is this the best approach for getting the location without page refresh .. or there is something else too .

Answer 1

I don't think that's allowed in PHP, closing and opening PHP inline in an array assignment. Try this instead:

'latitude' => '<div class ="latitude"></div>',
'longitude' => '<div class ="longitude"></div>',

Answer 2

A couple issues in your code about PHP in general and about using https://github.com/marcferna/CakePHP-GoogleMapHelper:

1. You are assigning <div class = 'latitude'></div> and <div class = 'longitude'></div> to the latitude and longitude when it's expecting just a number so that is never going to work.

2. PHP is server side and Javascript gets executed on the client side so that assignment is never go going to work because the PHP has already been executed. See more questions about this: How to assign the javascript variable value to php variable

Solution

With the code that you provided...the solution could be to use the Google Maps javascript API directly to update the map with the position that comes from the server: setCenter(latlng:LatLng)

var auto_refresh = setInterval(function() {
  $.get('http://localhost/Location/locate', function(data){
    # Get the map instance and modify the center
    # map_canvas is the default variable name that contains the Google Map
    map_canvas.setCenter(new google.maps.LatLng(data.lat, data.long));
  }, 'json');
}, 1000);