Skip to content

Instantly share code, notes, and snippets.

@psahni

psahni/map_direction_complex.html

Created September 29, 2011 16:48
Show Gist options
  • Save psahni/1251239 to your computer and use it in GitHub Desktop.
Save psahni/1251239 to your computer and use it in GitHub Desktop.
Download ZIP
map_direction_complex.html
Raw
map_direction_complex.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
/* var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];*/
var delhi = new google.maps.LatLng(28.613889, 77.208889)
var neighborhoods = [
new google.maps.LatLng(28.57, 77.32)
];
var markers = [];
var iterator = 0;
var map;
//---------------------------------------------------------------------------------------------
function initialize(){
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: delhi
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
markers.push(new google.maps.Marker({
position: delhi,
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
}
//---------------------------------------------------------------------------------------------
function drop() {
setbounds();
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
//---------------------------------------------------------------------------------------------
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
//----------------------------------------------------------------------------------------------
function setbounds(){
var bounds = new google.maps.LatLngBounds();
for (var i=0; i< neighborhoods.length; i++) {
bounds.extend(neighborhoods[i]);
}
bounds.extend(delhi)
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
//----------------------------------------------------------------------------------------------
function calcRoute(){
var start = String(delhi.lat()) + "," + String(delhi.lng());
end = String(neighborhoods[0].lat()) + ","+ String(neighborhoods[0].lng());
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//console.log(response.routes[0].legs[0].steps);console.log(response.routes[0].bounds);console.log(response.routes[0].overview_path[0])
//directionsDisplay.setDirections(response);
showSteps(response);
}
});
}
var route_points = [];
var test = [];
var counter = 0;
function showSteps(directionResult){
//console.log(directionResult.routes[0].overview_path)
//var myRoute = directionResult.routes[0].legs[0];
var myRoute = directionResult.routes[0].overview_path;
//myRoute.steps.length
for(var i = 0; i < myRoute.length; i++) {
//ppolypath(myRoute.steps[i].start_point);
//setTimeout("ppolypath(" + (myRoute.steps[i].start_point) + ")",1000);
//setTimeout('mytest(' + i + ')', 5000);
//test.push(i);
//route_points.push(myRoute.steps[i].end_point);
route_points.push(myRoute[i]);
}
console.log(route_points.length);
var cityPath = new google.maps.Polyline({
path: [delhi],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
cityPath.setMap(map);
ppolypath(counter, delhi);
//polypath()
}
function ppolypath(i, prev_point){
//console.log(route_points[i]);
if(route_points[i]!=undefined){
var point = [prev_point, route_points[i]] ;
var cityPath = new google.maps.Polyline({
path: point,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 5
});
cityPath.setMap(map);
prev_point = route_points[i];
counter = counter + 1;
setTimeout(function(){ ppolypath(counter, prev_point )}, 50);
}
else{
var cityPath = new google.maps.Polyline({
path: [route_points[route_points.length-1], neighborhoods[0]],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 5
});
}
}
//--> This function draws the line between two destinations
function polypath(){
//neighborhoods.push(delhi)
var cityPath = new google.maps.Polyline({
path: route_points ,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
cityPath.setMap(map);
}
function mytest(i){
if(test[i]!=undefined){
alert('called ' + String(i));
i = i + 1;
setTimeout('mytest(' + i + ')', 5000);
}
else{
return;
}
}
//setTimeout("timedCount()",1000);
//setTimeout("animate("+(d+step)+")", tick);
function makeRoute( point){
ppolypath(points)
setTimeout("ppolypath(" + (points) + ")",1000);
}
</script>
</head>
<body>
<div id="map_canvas">map div</div>
<button id = "drop" onclick="drop()">Drop Markers</button>
</body>
<script type='text/javascript'>
window.onload = initialize();drop();calcRoute();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment