22  Online  Animated  Mapping   Mapping  in  the  Cloud   Peterson  

Bouncing  Icon  

Func;on  within  the  API  

Map center var center_of_map = new google.maps.LatLng(41.259531,-96.012599); var office = new google.maps.LatLng(41.258431,-96.012599);

Marker

function initialize() { location var mapOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, center: center_of_map New map }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var marker = new google.maps.Marker({ map:map, draggable:false, Marker animation: google.maps.Animation.BOUNCE, attributes position: office }); google.maps.event.addListener(marker, 'click', toggleBounce); } function toggleBounce() { Clicking on marker if (marker.getAnimation() != null) { toggles bouncing marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } Make it } bounce

Moving  Icon  

A  lot  of  JavaScript  

function calcRoute(){ if (timerHandle) { clearTimeout(timerHandle); } if (marker) { marker.setMap(null);} polyline.setMap(null); poly2.setMap(null); directionsDisplay.setMap(null);

Reset variables

Create a renderer for directions and attach to map

var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var start = document.getElementById("start").value; var end = document.getElementById("end").value; var travelMode = google.maps.DirectionsTravelMode.DRIVING

Get beginning and ending addresses

var request = { Method of travel: DRIVING, origin: start, Parameters for WALKING, or BICYCLING destination: end, travel route request travelMode: travelMode }; var path = response.routes[0].overview_path; Two embedded loops that divide route var legs = response.routes[0].legs; for (i=0;i