スポンサードリンク

ルート検索の基本マップ/ルート検索API(Direction API)

◆ Google Maps API v3 / ルート検索の基本マップ

ルート検索APIの基本マップです。スタート地点と終点を指定するだけで、地図右側にルートディスプレイはありません。


<script type="text/javascript">
var center = new google.maps.LatLng(35.67849, 139.39178);
var zoom = 10;
var mapTypeId = google.maps.MapTypeId.ROADMAP

var rendererOptions =
{
draggable: true,
preserveViewport:false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;

var directionsService = new google.maps.DirectionsService();
var map;
var tokyo= new google.maps.LatLng(35.68407, 139.63623);

function initialize()
{
	var myOptions =
	{
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);

	google.maps.event.addListener(directionsDisplay, 'directions_changed', function()
	{
	});
	calcRoute();
}

function calcRoute()
{
	var request =
	{
	origin: "東京",
	destination: "大阪",

	travelMode: google.maps.DirectionsTravelMode.DRIVING,//ドライビングモード指定(車)
	unitSystem: google.maps.DirectionsUnitSystem.METRIC,//単位km表示
	optimizeWaypoints: true,//最適化された最短距離にする。
	avoidHighways: false,//trueで高速道路を使用しない
	avoidTolls: false //trueで有料道路を使用しない
	};
	directionsService.route(request, function(response, status)
	{
		if (status == google.maps.DirectionsStatus.OK)
		{
		directionsDisplay.setDirections(response);
		}
	});
}

window.onload=initialize;
</script>

◆ Google Maps API v3 ルート検索の基本マップのサンプルデモ

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">