Databases
StackOverflow2013
Postsdbo
POGoogle maps api v3 draw polyline
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle maps api v3 draw polyline
    primarykey
    data
    text
    <p>I'm new in javascript so i have problem with drawing polyline on my map. I'm receiving coordinates from GPS in vehicle and i want to draw car movement. So for i put markers on the places my car passed, but i'm not sure how to add polyline. Can anybody help me?</p> <p>I've written this so far:</p> <pre><code> var map; var markers=[]; var timeout=5000; var interval=null; function init2(){ var myLatlng = new google.maps.LatLng(45.7997016667,15.97143); var mapOptions = { zoom: 14, center: myLatlng, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); update_markers(); } function update_markers(){ console.log('update...'); for(var x in markers){ markers[x].setMap(null); } markers=[]; $.getJSON('/get', function(d){ var l=d.length; for(var x=l-5;x&lt;l;x++){ var f1=parseFloat(d[x].lat); var f2=parseFloat(d[x].long); if(f1&gt;100){ continue; f1=f1/100.0; f2=f2/100.0; } markers.push(new google.maps.Marker({ position: new google.maps.LatLng(f1, f2), map: map, title: d[x].time })); } } ); interval=setTimeout(update_markers, timeout); } google.maps.event.addDomListener(window, 'load', init2); $(function(){ $('#timeout_sel').change(function(){ clearTimeout(interval); timeout=$(this).val(); update_markers(); }); }); </code></pre> <p>And i don't know how to put this into my code:</p> <pre><code> function initialize() { var myLatLng = new google.maps.LatLng(0, -180); var mapOptions = { zoom: 3, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </code></pre> <p>Can you give me some tips? The second code is from google examples and it uses fixed latlng, how do i add this in may update_markers function so it uses the same coordinates as marker? </p> <p>EDIT:</p> <pre><code> var map; var markers=[]; var timeout=5000; var interval=null; var flightPlanCoordinates=[]; function init2(){ var myLatlng = new google.maps.LatLng(45.7997016667,15.97143); var mapOptions = { zoom: 14, center: myLatlng, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); update_markers(); } function update_markers(){ console.log('update...'); for(var x in markers){ markers[x].setMap(null); } markers=[]; $.getJSON('/get', function(d){ var l=d.length; for(var x=l-5;x&lt;l;x++){ var f1=parseFloat(d[x].lat); var f2=parseFloat(d[x].long); if(f1&gt;100){ continue; f1=f1/100.0; f2=f2/100.0; } markers.push(new google.maps.Marker({ position: new google.maps.LatLng(f1, f2), map: map, title: d[x].time })); flightPlanCoordinates = new google.maps.LatLng(f1,f2); } var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); } ); interval=setTimeout(update_markers, timeout); } google.maps.event.addDomListener(window, 'load', init2); $(function(){ $('#timeout_sel').change(function(){ clearTimeout(interval); timeout=$(this).val(); update_markers(); }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USla lluvia
    1. USla lluvia
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle maps api v3 draw polyline
      1. This table or related slice is empty.
      1. VTUpMod
    1. COTake a look at your current code and the code you want to add. Do you see that some parts are common between the two, or at least very similar, and some parts are different? You already have the common parts, now you need to add the different parts. Specifically, that will be the three statements that create the `flightPlanCoordinates` and the `flightPath` and adds that to the map.
      singulars
      1. POGoogle maps api v3 draw polyline
      1. USMichael Geary
    2. COWith regard to the specific question of how to use the marker latlngs instead of the hard coded values, do this: (1) Create an empty array before your marker loop with `var flightPlanCoordinates = [];` (2) Each time you add a marker, push the same `LatLng` value (your `position`) onto that array. (3) After the loop, create the new `PolyLine` and add it to the map.
      singulars
      1. POGoogle maps api v3 draw polyline
      1. USMichael Geary
    3. COi edited post so you can correct me if i'm doing something wrong. i did first and second thing. but i'm not sure how to: add it to the map.
      singulars
      1. POGoogle maps api v3 draw polyline
      1. USla lluvia
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload