i doing project should create web page shows google map markers @ specified gps coordinates. project organized in following way. @ server side, have php script accepts http request gps device, receives , stores gps coordinates in corresponding .txt file. php file includes javascript/jquery code reads .txt file gps coordinates, create new instance of google map , put markers on map user make request in web browser. electronic hardware engineer, pretty new me. code found reloads map on every 5 second, makes map flashing/blinking while on each reload. also, if change zooming manually in browser, resets default on each map reload. there way avoid map blinking, , update markers smoothly. in following snippet of javascript/jquery code have.
function initialize() { mapprop = { center:mycenter, zoom:17, maptypeid:google.maps.maptypeid.roadmap }; setinterval('mark()',5000); } function mark() { map=new google.maps.map(document.getelementbyid("googlemap"),mapprop); var file = "gps.txt"; $.ajaxsetup({cache: false}); $.get(file, function(txt) { var lines = txt.split("\n"); (var i=0;i<lines.length;i++){ console.log(lines[i]); var words=lines[i].split(","); if ((words[0]!="")&&(words[1]!="")) { marker=new google.maps.marker({ position:new google.maps.latlng(words[0],words[1]), }); marker.setmap(map); map.setcenter(new google.maps.latlng(words[0],words[1])); map.addmarker(new markeroptions().position(entry.getvalue()).title(entry.getkey())); } } lastlength = lines.length; marker.setanimation(google.maps.animation.bounce); }); } google.maps.event.adddomlistener(window, 'load', initialize);
what going on
you keep recreating map on every update rather creating once , add new markers it.
fixed code, comments:
function initialize() { // map starting point var mycenter = new google.maps.latlng(0, 0); // coordinates file var file = "gps.txt"; // init , keep reference last line of coordinates var lastlength = 0; // init , keep reference last set marker var marker; // map options var mapprop = { center:mycenter, zoom:17, maptypeid:google.maps.maptypeid.roadmap }; // create map var map = new google.maps.map(document.getelementbyid("googlemap"), mapprop); // execute once mark(); // set update setinterval(mark, 5000); // runs on schedule add new markers function mark() { $.ajaxsetup({cache:false}); $.get(file, function(txt) { var lines = txt.split("\n"); // disable animation on last marker previous update if(marker) { marker.setanimation(null); } // start last line + 1 previous update for(var i=lastlength; i<lines.length; ++i) { // debug //console.log(lastlength); //console.log(lines[i]); var words=lines[i].split(","); if(words[0] != "" && words[1] != "") { // new marker marker = new google.maps.marker({ position:new google.maps.latlng(words[0],words[1]), }); // put marker on map marker.setmap(map); // center on marker map.setcenter(new google.maps.latlng(words[0],words[1])); // don't know api enough fix part although seems work without //map.addmarker(new markeroptions().position(entry.getvalue()).title(entry.getkey())); } } // update list starting position lastlength = lines.length; //set animation on current last marker marker.setanimation(google.maps.animation.bounce); }, 'text'); // added datatype:text } } // init google.maps.event.adddomlistener(window, 'load', initialize); 
Comments
Post a Comment