Databases
StackOverflow2013
Postsdbo
POhow to reset value of steps in google maps v3 animation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to reset value of steps in google maps v3 animation
    primarykey
    data
    text
    <p>this is my example <a href="http://gidzior.net/map/v3_animate_marker_directions.html" rel="nofollow">http://gidzior.net/map/v3_animate_marker_directions.html</a> (i'm using placeholder in the input), core of GM code is from geocodezip.com, i develop the code with the great help of Andrew Leach</p> <p>1500 meters in the animation before the destination is set to zoom could be seen to better reach this destination point, unfortunately, after zoom, animation is not smooth and therefore I set the "step" value to 15, how to reset this value after animation stops</p> <p>i set step = 15 - <code>if (d&gt;eol-1500 &amp;&amp; zoomed!=true) { map.setZoom(15); step = 15; zoomed=true; }</code></p> <p>WHOLE SCRIPT</p> <pre><code> var map; var directionDisplay; var directionsService; var stepDisplay; var markerArray = []; var position; var marker = null; var polyline = null; var poly2 = null; var speed = 0.0000005, wait = 1; var infowindow = null; var zoomed; var zoomedd; var zoomeddd; var myPano; var panoClient; var nextPanoId; var timerHandle = null; var size = new google.maps.Size(26,25); var start_point = new google.maps.Point(0,0); var foothold = new google.maps.Point(13,15); var car_icon = new google.maps.MarkerImage("http://gidzior.net/map/car.png", size, start_point, foothold); function createMarker(latlng, label, html) { var contentString = '&lt;b&gt;'+label+'&lt;/b&gt;&lt;br&gt;'+html; var marker = new google.maps.Marker({ position: latlng, map: map, icon: car_icon, clickable: false, zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5 }); return marker; } function initialize() { infowindow = new google.maps.InfoWindow( { size: new google.maps.Size(150,50) }); // Instantiate a directions service. directionsService = new google.maps.DirectionsService(); // Create a map and center it on Warszawa. var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); address = 'warszawa' geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { map.setCenter(results[0].geometry.location); }); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map, } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow(); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); } var steps = [] function calcRoute(){ if (timerHandle) { clearTimeout(timerHandle); } if (marker) { marker.setMap(null);} polyline.setMap(null); poly2.setMap(null); directionsDisplay.setMap(null); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map, suppressMarkers:true } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var start = document.getElementById("start").value; var end = document.getElementById("end").value; var travelMode = google.maps.DirectionsTravelMode.DRIVING var request = { origin: start, destination: end, travelMode: travelMode, waypoints: [{ location:new google.maps.LatLng(52.185570, 20.997255), stopover:false}], optimizeWaypoints: false }; // Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK){ directionsDisplay.setDirections(response); var bounds = new google.maps.LatLngBounds(); var route = response.routes[0]; startLocation = new Object(); endLocation = new Object(); // For each route, display summary information. var path = response.routes[0].overview_path; var legs = response.routes[0].legs; 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; for (k=0;k&lt;nextSegment.length;k++) { polyline.getPath().push(nextSegment[k]); bounds.extend(nextSegment[k]); } } } polyline.setMap(map); document.getElementById("distance").innerHTML = (polyline.Distance()/1000).toFixed(2)+" km"; map.fitBounds(bounds); // createMarker(endLocation.latlng,"end",endLocation.address,"red"); map.setZoom(18); startAnimation(); zoomed=false; zoomedd=false; zoomeddd=false; } }); } var step = 50; // 5; // metres var tick = 100; // milliseconds var eol; var k=0; var stepnum=0; var speed = ""; var lastVertex = 1; //=============== animation functions ====================== 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) { // alert("animate("+d+")"); if (d&gt;eol) {; map.panTo(endLocation.latlng); marker.setPosition(endLocation.latlng); return; } if (d&gt;eol-20000 &amp;&amp; zoomeddd!=true) { map.setZoom(12); // or whatever value zoomeddd=true; } if (d&gt;eol-10000 &amp;&amp; zoomedd!=true) { map.setZoom(13); // or whatever value zoomedd=true; } if (d&gt;eol-1500 &amp;&amp; zoomed!=true) { map.setZoom(15); // or whatever value step = 15; zoomed=true; } 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)); // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON)); // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON)); // map.addOverlay(marker); poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10}); // map.addOverlay(poly2); setTimeout("animate(50)",2000); // Allow time for the initial map display } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgidzior
    1. USgidzior
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POhow to reset value of steps in google maps v3 animation
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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