CODEWITHSUNDEEP
javascriptphphtmlgps
user7763438
user7763438

Reputation: 65

Update real time google map

Im needing two things

1) Real time update without page refresh 2) A tag on the marker to identify who is where.

This some code I came across which does place marker on map via JS but no real time updates without refresh..

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map-canvas 
{ 
height: 400px; 
width: 500px;
}
</style>
</head>

<body>

<div id="map-canvas"></div>

<script>
var myLatLng = new google.maps.LatLng( 54.0239304,-1.5453314000000091 ),
        myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },
        map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
        marker = new google.maps.Marker( {position: myLatLng, map: map} );

    marker.setMap( map );
    setTimeout( function(){ 

        marker.setPosition( new google.maps.LatLng( 54.0239304,-1.5453314000000091 ) );
        map.panTo( new google.maps.LatLng( 54.0239304,-1.5453314000000091 ) );

    }, 1500 );
</script>

</body>

</html>

Any help on this subject would be much appreciated.

Upvotes: 1

Views: 1247

Answers (2)

Chidozie Duru
Chidozie Duru

Reputation: 162

I think i understand what you are trying to achieve. Why don't you look at this demo i made that implements most of Google API.Including the smooth transition you want to implement. enter link description here

Simply replace the two occurences of xxxxxxxxxxxxxxxxxxxx with your Google API key and do not forget to enable the Geocode API,Places API,Maps Javascript API.

If you need further help on this,it will be my pleasure to assist you and even show you a live demo.

Upvotes: 0

Kody R.
Kody R.

Reputation: 2460

"Real time update" - When you get new incoming data, you will have to check your incoming data's id (if it has an id) and check if there is any marker with that id currently on the map. myOptions is just an object, so you can add your id there (i.e. "markerId: 1234567").

Upvotes: 2

Related Questions