javascript - Continuously updating Google Maps with user location -
i super new web development , building web app has google map , continuously update map user location. able read values db , can display on map, 1 time. not find anywhere how continuously update position (hopefully without reloading page also). can direction on how approach this? here of code reference:
<?php include_once('location.php') ?> <!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>my geolocation</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> var map; function initialize() { var mylatlng = new google.maps.latlng(<?php echo $current_lat ?>, <?php echo $current_long ?>); var mapoptions = { zoom: 14, center: mylatlng }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var marker = new google.maps.marker({ position: mylatlng, map: map, title: 'test' }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> //read client (post) $content = file_get_contents('php://input'); $post_data = json_decode($content , true); $lat = $post_data['lat']; $long = $post_data['long']; $speed = $post_data['speed']; $hacc = $post_data['hacc']; $vacc = $post_data['vacc']; $timestamp = $post_data['timestampe']; //connect mysql $con1 = mysql_connect("localhost", "xxxxxxxx", "bbbbbb", "yyyyyy"); if ($con1->connect_error) { die("connection failed: " . $conn->connect_error); } $db_selected = mysql_select_db('yyyyyy'); if (!$db_selected) { die ('can\'t use foo : ' . mysql_error()); } if (!empty($lat)) { $sql = "insert locationinfo (latitude, longitude, speed, hor_acc, ver_acc, d) values ('$lat', '$long', '$speed', '$hacc', '$vacc', '$timestamp');"; mysql_query($sql) or die ('error updating database: ' . mysql_error()); } $read_query = "select * locationinfo;"; $results = mysql_query($read_query) or die ('error reading database: ' . mysql_error()); $column = array(); while($row = mysql_fetch_array($results)){ $column[] = $row; } $current_lat = $column[sizeof($column) - 1]['latitude']; $current_long = $column[sizeof($column) - 1]['longitude']; ?>
google maps javascript reference
you can update marker marker.setposition( new latlng(...) ), or in other words assigning new position. seems me you're putting position in input field, submitting, reading field , setting marker , saving position in database. if want update position of marker, can use input field again, read field value javascript, , update marker's position (with marker.setposition()). if want pass db again, can additionally pass data script using ajax. depends on you're doing , want want do.
edited after comment
you can setup javascript function make ajax request php script , update position once gets data. , call script every x number of seconds. use settimeout create delay , make function call timeout once gets data. save trouble , use library handle ajax calls - jquery gives indirectly lot of support because lot of people use it. need make sure php script doesn't give except position information, not whole html file have now. simplified this: have php file sends lat/lng pair json, , script gets called browser around every 10 seconds. there ofcourse little things might pop out ... , please note, don't php.
get_position.php
... $latlng = array('lat' => $lat, 'lng' => $lng); echo json_encode($latlng); js, using jquery.ajax
var marker = .... var delay = 10000; // 10 second delay function updateposition() { $.ajax({ url: path/to/get_position.php, datatype: 'json' }) .done(function calldone(data) { // update marker position var latlng = new google.maps.latlng( data.lat, data.lng ); marker.setposition( latlng ); // call function again settimeout( updateposition, delay ); }); } // call function initally settimeout( updateposition, delay );
Comments
Post a Comment