WordPressにGoogle Maps API V3！

この記事でご要求をいただいたので、記事を付けたし。

余計なソースを削除して、最低限のソースだけにしたサンプル地図

目的地アイコン（マーカー）をクリックして、ルート検索結果と距離を表示させるデモ

上記デモのGoogle Mapを表示させるscriptは、次の通り

<script type="text/javascript">
window.onload=initialize;
var total;
var center = new google.maps.LatLng(35.80668, 139.75296);
var zoom = 9;
var mapTypeId = google.maps.MapTypeId.ROADMAP

//◆ルート検索
	rendererOptions = 
	{
	draggable: false,
	preserveViewport:true

	};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.suppressMarkers = true;
var directionsService = new google.maps.DirectionsService();
var rendererOptions;

var html;
var total;

var initialLocation;

var map;
var marker;
var defmarker;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() 
{

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

	var markers = [
	['公園1', 35.87963, 139.39496,'kouen'],
	['公園2', 35.79242, 139.26249,'kouen'],
	['温泉1', 35.85706, 140.02406,'onsen'],
	['温泉2',35.79459, 140.51586,'onsen']
	];

	for (var i = 0; i < markers.length; i++) 
	{
	var marker = markers[i];

	var name = marker[0];
	var latlng = new google.maps.LatLng(marker[1], marker[2]);

	var category =  marker[3];
	//var html = "<b>" + name + "</b> <br/>";
	createMarker(latlng,map,category,name)
	}

	//◆現在地マーカー
	initialLocation = new google.maps.LatLng(35.80668, 139.75296);
	var ini = new google.maps.Marker(
	{  
	position: initialLocation,  //マーカ位置
	map: map,  
	title: '現在位置',  //タイトル位置
	icon: 'http://waox.main.jp/maps/icon/car2.png',//アイコン指定
	animation: google.maps.Animation.DROP
	});  

	directionsDisplay.setMap(map);

}

var distance;
var total;
var km;

function createMarker(latlng,map,category,name,result)
{
	var iconOffset = new google.maps.Point(34, 34); 
	var iconPosition = new google.maps.Point(0, 0);
	var iconSize = new google.maps.Size(34, 34);
	var iconShadowSize = new google.maps.Size(37, 34);

	var kouenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.png";
	var kouenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png";
	var kouenIcon = new google.maps.MarkerImage(kouenUrl, iconSize, iconPosition, iconOffset);
	var kouenShadow = new google.maps.MarkerImage(kouenShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var onsenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png";
	var onsenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png";
	var onsenIcon = new google.maps.MarkerImage(onsenUrl, iconSize, iconPosition, iconOffset);
	var onsenShadow = new google.maps.MarkerImage(onsenShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var customIcons =
	{
	kouen: {icon:kouenIcon,shadow:kouenShadow},
	onsen: {icon:onsenIcon,shadow:onsenShadow}
	};

	var icon = customIcons[category] || {};

	var marker = new google.maps.Marker(
	{
	map: map,
	position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title: name
	});

 	google.maps.event.addListener(marker, 'click', function() 
	{
	calcRoute(latlng) ;    
	html = "<b>" + name + "</b> <br/>" ;
	infoWindow.setContent(html); 
	infoWindow.open(map,marker);   
	});
} 

//◆ルート検索
function calcRoute(latlng) 
{
	google.maps.event.addListener(directionsDisplay, 'directions_changed', function() 
	{
	computeTotalDistance(directionsDisplay.directions);　//◆総距離合計
	});

	var request = 
	{
	origin: initialLocation,
	destination: latlng,

	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) 
		{
		//distance =   +response.routes[0].legs[0].distance.value/1000;
		//km =   "(" + distance.toFixed(1) + "km)";
		directionsDisplay.setDirections(response);

		}
	});
}

function computeTotalDistance(result)
{
total = 0;
var myroute = result.routes[0];
　　　　for (i = 0; i < myroute.legs.length; i++)
　　　　{
　　　　total += myroute.legs[0].distance.value;
　　　　}
　　　　total = total / 1000.

	document.getElementById("total").innerHTML =   "(" + total.toFixed(1) + "km)";
}  

</script>

body内には、地図と距離検索結果を表示させるタグを記述

<span id="total"></span>
<div id="map_canvas" style="width : 800px;height : 700px;"></div>

上記scriptで、車の位置（現在地）は、initialLocation = ・・・で座標を指定しています（PC版サンプルのため）。

	//◆現在地マーカー
	initialLocation = new google.maps.LatLng(35.80668, 139.75296);

この、initialLocationをソース中で距離計算のvar request内のoriginへ渡しています。

	var request = 
	{
	origin: initialLocation,
	destination: latlng,

なお、この記事（iPhone（アイフォン）でのユーザの現在座標位置を地図に表示する地理位置座標サービス（Geolocation）のGoogle Mapでの使い方とは？）を参考に、スマートフォンのGPSで現在地座標を取得して、initialLocationとして、

渡してやればiPhone（アイフォン）で取得した現在地から目的地アイコンまでの距離とルート表示が可能です。

サンプルデモがありますので、PCの場合は、ブラウザGoogle Chromeで見てみて下さい。iPhone（アイフォン）等スマートフォンの場合は、次のURLにアップしておきました。地図表示の高速化（読み込み中のマーカーを読み込まない）のテクニックとあわせて作ってあります。

iPhone（スマートフォン用端末）デモ

スポンサードリンク