WordPressにGoogle Maps API V3！

• （ルート検索API その1）　ルート経路検索の基本マップ
• （ルート検索API その2）　Waypoint（中間地点、経由地点）の複数設定+ルートディスプレイ
• （ルート検索API その3）　通過地点（stopover）の設定（マーカでない経由ポイントを設定）
• （ルート検索API その4）　preserveViewport／ルート全体を表示させずに地図の指定座標を表示させる方法
• （ルート検索API その5）　合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる

◆ 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

• Google Maps API v3 目次に戻る

スポンサードリンク