i'm working in vehicle tracking system, here have stored gps data in mysql. need show marker in google map. every row data denotes every second's gps data. here problem i'm not able show marker in google map every second.
note: using timer function in js, thats why each , every second variable assigned , variable match every second data in db.
this code:
<script type="text/javascript"> <?php $vehi = 1; ?> window.setinterval(function initialize() { <?php $sql= mysql_query("select * maploca id='$vehi'"); $sqlnm = mysql_num_rows($sql); $sqlqry=mysql_fetch_object($sql); ?> <?php $vehi++;?> var json = [ { "lat":<?php echo $sqlqry->latitude; ?>, "lng":<?php echo $sqlqry->longitude; ?> }] var latlng = new google.maps.latlng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>); var myoptions = { zoom: 18, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); var polylinecoordinates = [ new google.maps.latlng(<?php echo $sqlqry->latitude;?>,<?php echo $sqlqry->longitude;?>)]; var polyline = new google.maps.polyline({ path: polylinecoordinates, strokecolor: '#ff0000', strokeopacity: 1.0, strokeweight: 2, editable: true }); polyline.setmap(map); (var = 0, length = json.length; < length; i++) { var data = json[i], latlng = new google.maps.latlng(data.lat, data.lng); // creating marker , putting on map var marker = new google.maps.marker({ position: latlng, map: map }); } }, 1000); </script>
you need use ajax each time timer ticks or refresh page every 1 second. later not idea. reason php on page not executed every time timer ticks (only on first load).
you have write second file return latitude longitude data require show pin.
ie: ( uses jquery )
latlong service: ( /ajax/getlatlong.php?vid=1 )
<?php ob_start(); header("content-type: application/javascript"); /* important function here make sure request coming site , not stealing data (session var, etc) */ $sql= mysql_query("select * maploca id='" . mysql_real_escape_string($_get['vid']) . "'"); $sqlnm = mysql_num_rows($sql); $ll = array(); while ( $sqlqry = mysql_fetch_object($sql) ) { $ll[] = "{". "\"lat\": " . $sqlqry->latitude . ", " . "\"lng\": " . $sqlqry->longitude . "}"; } echo $_get['callback'] . "([" . implode(",", $ll) . "]);"; ?> the map page:
<script type="text/javascript"> <?php $vehi = 1; ?> var mygm = function() { var me = this; <?php $sql= mysql_query("select * maploca id='$vehi'"); $sqlnm = mysql_num_rows($sql); $sqlqry=mysql_fetch_object($sql); ?> <?php $vehi++;?> var json = [{ "lat":<?php echo $sqlqry->latitude; ?>, "lng":<?php echo $sqlqry->longitude; ?> }]; var latlng = new google.maps.latlng(json[0].lat,json[0].lng); var myoptions = { zoom: 18, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); var polylinecoordinates = [latlng]; var polyline = new google.maps.polyline({ path: polylinecoordinates, strokecolor: '#ff0000', strokeopacity: 1.0, strokeweight: 2, editable: true }); polyline.setmap(map); window.setinterval(function() { $.getjson( "/ajax/getlatlong.php?vid=1&callback=?" ) .done( function (data) { me.updatemap(data); }); }, 2000); this.updatemap = function(data) { $(data).each(function() { var latlng = new google.maps.latlng(this.lat, this.lng); // creating marker , putting on map var marker = new google.maps.marker({ position: latlng, map: me.map }); }); } } window.onload = function() { window.trackingmap = new mygm(); } </script> something should trick
Comments
Post a Comment