CODEWITHSUNDEEP
phpjavascripthtmlmysqlgoogle-maps
user1452485
user1452485

Reputation: 205

Real time tracking in google map

I already wrote a android apps to upload the lat and long to MySQL database(updated every 2min).

now, i have no idea how to show the real time location on Google map in the website(php,javascript,html) which means how to dynamic update the Google map markers every 2 min [get the last two minutes records from MySQL database and show the markers(update or disappear)]

and after i click the marker, it should show the info[get from mysql database(not important point because it same with static Google map!?]

just like this: http://traintimes.org.uk/map/tube/

I just know how to do when i just get 1 time (Static Google map!?) with my limited knowledge.

I have already searched same question in stack overflow and google but i am sorry i still no idea how to do it because of my lack of knowledge.

Real time Google Map

anyone could give me some tutorial website or suggestion?

At last, thank all of you and I still a learner of English,I am sorry about any wrong grammar.

Upvotes: 19

Views: 46375

Answers (1)

Stephen Blum
Stephen Blum

Reputation: 6834

Real-time Tracking Geo Latitude/Longitude on a Map

You are looking to update coordinate entities (lat/lon position) on a map (google maps or otherwise) in real-time as the updates occur. Here is a blog post that may get you started in the right direction: http://blog.pubnub.com/streaming-geo-coordinates-from-mongodb-to-your-iphone-app-with-pubnub-using-websocket-sdk/ - this uses MongoDB and Ruby rather than PHP and MySQL. However it will be easy to get things setup in this case with a real-time map in PHP and MySQL on an HTML page with the following details. And there is a video too: https://vimeo.com/60716860

Using MySQL to Trigger Update in Real-time

First you'll want to use either MySQL triggers to push the Lat/Long coords - Invoke pusher when mysql has changed - this uses MySQL Triggers

Or as an alternative you may want to use PHP directly to invoke the push signal using a PHP push SDK as follows: https://github.com/pubnub/php#php-push-api

$pubnub->publish(array(
    'channel' => 'live_map_coords',
    'message' => array( 12.3482, 8.3344 )
));

Receiving The Push Message in JavaScript and Showing the Updates on a Map

<script src=//pubnub.a.ssl.fastly.net/pubnub-3.4.5.min.js></script>
<script>(function(){

    PUBNUB.init({
        subscribe_key : 'demo'
    }).subscribe({
        channel  : 'live_map_coords',
        callback : function(lat_lon) { alert(lat_lon) }
    });

})();</script>

Once you have an map.html page with the above code in it, you can change the alert(lat_log) message popup with drawing coords on a map. Here is a fully working map drawn example using D3 JavaScript SVG rendering Framework: https://github.com/stephenlb/pubnub-mongo-pipe/blob/master/phone/map.html

NOTE: This is only a starting point and provides you with references on getting started to make it easy and simple, yet flexible based on the direction you will be taking your app.

Next Steps to Piece Together the Real-time Geo Map

You will next want to do the following to complete the process and join together all the separate components listed here.

  1. Modify the map.html page for your purposes to display always-visible dots. Note that in the video the dots are temporary beacons that display and vanish rapidly. You'll want to make them persist on the map. This is basically the "Make it look the way you want it" step.
  2. Decide how and when you want to trigger the TCP Socket Push events from PHP or MySQL directly. I'd recommend the PHP approach.

Upvotes: 18

Related Questions