マップをロードしていないdiv部分のみを表示する以下のコードは、事前に感謝するのに役立ちます
次のページを参照しました: https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionService();
var map;
var haight = new google.maps.LatLng(19.20,21.02);
var oceanBeach = new google.maps.LatLng(14.22,18.22);
function initialize(){
directionDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
};
map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute(){
var selectMode = document.getElementById('mode').value;
var request = {
origing: haight,
destination: oceanBeach,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status){
if( status === google.maps.setDirectionsStatus.OK){
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<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>
<option value="TRANSIT">TRANSIT</option>
</select>
</div>
<div id="googleMap" style="width:800px;height:600px; left: 200px; top: 50px "/> </body>
</html>