Databases
StackOverflow2013
Postsdbo
POAnimating Multiple Markers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimating Multiple Markers
    primarykey
    data
    text
    <p>I have several markers on a map with polylines drawn. I would like to move each marker along the path of the polyline to simulate simultaneous movement of each marker.</p> <p>I am having problems doing this i am getting only the last marker to move and the rest doesn't. Being new to the use of this programming technology i think something is wrong with my code especially the way i attempt to animate each marker. I need some guidance on this. </p> <p>Here's my work thus far: <a href="http://jsbin.com/otafob/3/edit" rel="nofollow">Jsbin DEMO</a></p> <pre><code> var startLoc = new Array(); startLoc[0] = 'rio claro, trinidad'; startLoc[1] = 'preysal, trinidad'; startLoc[2] = 'san fernando, trinidad'; startLoc[3] = 'couva, trinidad'; var endLoc = new Array(); endLoc[0] = 'princes town, trinidad'; endLoc[1] = 'tabaquite, trinidad'; endLoc[2] = 'mayaro, trinidad'; endLoc[3] = 'arima, trinidad'; var Colors = ["#FF0000", "#00FF00", "#0000FF"]; function initialize() { infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); var myOptions = { zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); address = 'Trinidad and Tobago' geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { map.setCenter(results[0].geometry.location); }); } function createMarker(latlng, label, html) { // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = '&lt;b&gt;'+label+'&lt;/b&gt;&lt;br&gt;'+html; var marker = new google.maps.Marker({ position: latlng, map: map, title: label, zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5 }); marker.myname = label; google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map,marker); }); return marker; } function setRoutes(){ var directionsDisplay = new Array(); for (var i=0; i&lt; startLoc.length; i++){ var rendererOptions = { map: map, suppressMarkers : true } directionsService = new google.maps.DirectionsService(); var travelMode = google.maps.DirectionsTravelMode.DRIVING; var request = { origin: startLoc[i], destination: endLoc[i], travelMode: travelMode }; directionsService.route(request,makeRouteCallback(directionsDisplay[i])); } function makeRouteCallback(disp){ return function(response, status){ if (status == google.maps.DirectionsStatus.OK){ var bounds = new google.maps.LatLngBounds(); var route = response.routes[0]; startLocation = new Object(); endLocation = new Object(); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FFFF00', strokeWeight: 3 }); // For each route, display summary information. var path = response.routes[0].overview_path; var legs = response.routes[0].legs; //Routes if (status == google.maps.DirectionsStatus.OK){ console.log(response); disp = new google.maps.DirectionsRenderer(rendererOptions); disp.setMap(map); disp.setDirections(response); //Markers for (i=0;i&lt;legs.length;i++) { if (i == 0) { startLocation.latlng = legs[i].start_location; startLocation.address = legs[i].start_address; // marker = google.maps.Marker({map:map,position: startLocation.latlng}); marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); } endLocation.latlng = legs[i].end_location; endLocation.address = legs[i].end_address; var steps = legs[i].steps; for (j=0;j&lt;steps.length;j++) { var nextSegment = steps[j].path; var nextSegment = steps[j].path; for (k=0;k&lt;nextSegment.length;k++) { polyline.getPath().push(nextSegment[k]); //bounds.extend(nextSegment[k]); } } } } } polyline.setMap(map); //map.fitBounds(bounds); startAnimation(); } } } var lastVertex = 1; var stepnum=0; var step = 50; // 5; // metres var tick = 100; // milliseconds var eol; //---------------------------------------------------------------------- function updatePoly(d) { // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow if (poly2.getPath().getLength() &gt; 20) { poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]); // map.addOverlay(poly2) } if (polyline.GetIndexAtDistance(d) &lt; lastVertex+2) { if (poly2.getPath().getLength()&gt;1) { poly2.getPath().removeAt(poly2.getPath().getLength()-1) } poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d)); } else { poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng); } } //---------------------------------------------------------------------------- function animate(d) { if (d&gt;eol) { marker.setPosition(endLocation.latlng); return; } var p = polyline.GetPointAtDistance(d); //map.panTo(p); marker.setPosition(p); updatePoly(d); timerHandle = setTimeout("animate("+(d+step)+")", tick); } //------------------------------------------------------------------------- function startAnimation() { eol=polyline.Distance(); map.setCenter(polyline.getPath().getAt(0)); poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#FFFF00", strokeWeight:3}); setTimeout("animate(50)",2000); // Allow time for the initial map display } //---------------------------------------------------------------------------- &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="tools"&gt; &lt;button onclick="setRoutes();"&gt;Start&lt;/button&gt; &lt;/div&gt; &lt;div id="map_canvas" style="width:100%;height:100%;"&gt;&lt;/div&gt; </code></pre> <p> </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdevdar
    1. USdevdar
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. CO`makeRouteCallback(directionsDisplay[i])` must be wrong. `directionsDisplay` is an empty array that never gets populated.
      singulars
      1. POAnimating Multiple Markers
      1. USBeetroot-Beetroot
 

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