Skip to content

Instantly share code, notes, and snippets.

@silphire
Created April 20, 2011 12:33
Show Gist options
  • Save silphire/931209 to your computer and use it in GitHub Desktop.
Save silphire/931209 to your computer and use it in GitHub Desktop.
マウスクリックで指定した2点間をの経路を算出する
<html lang="ja"> <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="map.js"></script>
</head>
<body onload="initialize()">
<div id="control" style="width: 100%; height: 10%">
<input type="button" value="clear" onclick="clear_markers()">
</div>
<div id="main_map" style="width: 100%; height: 80%">
</div>
</body>
</html>
var theMap;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var markers = [];
var wayPoints = [];
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(35.65, 139.75),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
directionsDisplay = new google.maps.DirectionsRenderer();
theMap = new google.maps.Map(document.getElementById("main_map"), myOptions);
directionsDisplay.setMap(theMap);
google.maps.event.addListener(theMap, 'click', function(ev) {
// マーカー表示
var newMarker = new google.maps.Marker({
position: ev.latLng,
draggable: false,
map: theMap
});
markers.push(newMarker);
if(markers.length > 2) {
wayPoints.push(ev.latLng);
}
if(markers.length >= 2) {
var request = {
origin: markers[0].position,
destination: markers[markers.length - 1].position,
waypoints: wayPoints,
travelMode: google.maps.DirectionsTravelMode.WALKING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
};
directionsService.route(request, function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
});
}
function clear_markers() {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment