We need help.Currently our waypoint bouncing code works when the mouse is pointed on the waypoint marker. We want it to bounce when the mouse is pointed on the outside text.Check the screenshot link: http://screencast.com/t/NPucK50C2y
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js? key=AIzaSyBADaZ6uLiLXx0FokaKyQeV15blaiLDKUI&sensor=false&libraries=places"></script>
<script type="text/javascript">
var markers=new Array();
var map;
function initialize() {
var bounceTimer;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers : true
});
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { featureType:'water', stylers:[{color:'#46bcec'},{visibility:'on'}] },{ featureType:'landscape', stylers:[{color:'#f2f2f2'}] },{ featureType:'road', stylers: [{saturation:-100},{lightness:45}] },{ featureType:'road.highway', stylers: [{visibility:'simplified'}] },{ featureType:'road.arterial', elementType:'labels.icon', stylers: [{visibility:'off'}] },{ featureType:'administrative', elementType:'labels.text.fill', stylers: [{color:'#444444'}] },{ featureType:'transit', stylers:[{visibility:'off'}] },{ featureType:'poi', stylers:[{visibility:'off'}] }],
});
directionsDisplay.setMap(map);
// directionsDisplay.setPanel(document.getElementById('panel'));
var waypts = [{location:new google.maps.LatLng(1.28644, 103.84663), stopover:true}, {location:new google.maps.LatLng(1.28627, 103.85927), stopover:true}];
var request = {
origin: new google.maps.LatLng(1.30365, 103.85256),
destination: new google.maps.LatLng(1.29411, 103.84631),
waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var markerCounter = 1;
directionsDisplay.setDirections(response);
// add custom markers
var route = response.routes[0];
// start marker
addMarker(route.legs[0].start_location, markerCounter++);
// the rest
for (var i = 0; i < route.legs.length; i++) {
addMarker(route.legs[i].end_location, markerCounter++);
}
}
});
function addMarker(position, i) {
var marker = new google.maps.Marker({
// @see http://stackoverflow.com/questions/2436484/how-can-i-create-numbered-map-markers-in-google-maps-v3 for numbered icons
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + i + '|fff|000000',
position: position,
map: map
});
google.maps.event.addListener(marker, 'mouseover', function() {
if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {
// Because of the google maps bug of moving cursor several times over and out of marker
// causes bounce animation to break - we use small timer before triggering the bounce animation
//
clearTimeout(bounceTimer);
var that = this;
bounceTimer = setTimeout(function(){
that.setAnimation(google.maps.Animation.BOUNCE);
},
500);
}
});
google.maps.event.addListener(marker, 'mouseout', function() {
if (this.getAnimation() != null) {
this.setAnimation(null);
}
// If we already left marker, no need to bounce when timer is ready
clearTimeout(bounceTimer);
});
markers.push(marker);
return marker;
}
}
/*function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="float:left; width: 950px; height: 400px; float: left; color:"> </div>
<!--<div onclick=scrollToMarker(0)>Pointer 1</div>
<div onclick=scrollToMarker(1)>Pointer 2</div>
<div onclick=scrollToMarker(2)>Pointer 3</div>
<div onclick=scrollToMarker(3)>Pointer 4</div>-->
<div style="float:left; width:20%; cursor:pointer;">Pointer 1</div>
<div style="float:left; width:20%; cursor:pointer;">Pointer 2</div>
<div style="float:left; width:20%; cursor:pointer;">Pointer 3</div>
<div style="float:left; width:20%; cursor:pointer;">Pointer 4</div>
</body>
</html>
