|
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
width: 70%;
float: right;
}
#directionsPanel {
height: 100%;
overflow: auto;
background:#0F4D87;
color:white;
width:30%;
}
#control {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
@media print {
#map-canvas {
width: 70%;
margin: 0;
}
#directionsPanel {
width:30%;
}
}
.adp-placemark
{
background-color:#1C7DD7;
}
.adp-legal {
color: black;
}
.warnbox-content {
background: white;
color: black;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var origin = new google.maps.LatLng(25.520581,-103.40607);
var destination = new google.maps.LatLng(25.520581, -103.50607);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: origin
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
calcRoute();
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var selectedMode = document.getElementById("mode").value;
var request = {
origin: origin,
destination: destination,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
var image = 'down2.png';
var marker = new google.maps.Marker({
position: origin,
map: map,
icon: image,
animation: google.maps.Animation.DROP,
title:"Click for show the data of the client"
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="directionsPanel">
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
I'm a software developer. I like to develop web pages and desktop systems. I'm learning unity, xamarin, swift, android, security, UX
Submit an article or tip