WordPressにGoogle Maps API V3！

◆Google Maps API V3　+　Directions API　（マップ（地図）をクリックしてルート経路検索）

v2と何が違うかは、さておきGoogle Maps JavaScript API V3 デモ ギャラリーから自分のｻｲﾄで使えそうなサンプルを試してみる。

コレがのちのちiPhone（アイフォン）用でも使えそう。

このデモギャラリーサンプル、機能が足りないところがあるので追加。

• Get directions！で表示せた緑色のマーカー（アイコン）も移動できないので、同様に「draggable: true」を追加。
• 日本で対応していない var mode の “case “bicycling”:　mode = google.maps.DirectionsTravelMode.DRIVING;break;”をscriptから削除。
• HTMLの<option value=”bicycling”>は削除
• HTMLの input タグで、highway tolls のcheckedはデフォルトに不要なので削除
  • <input type=”checkbox” id=”highways” checked=”checked” />・・・・・一般道優先（チェックすると高速を使わない）
  • <input type=”checkbox” id=”tolls” checked=”checked”/>・・・・・チェックすると有料道路を使わない（※試してみたら有料の橋やバイパス道路を避けた。highwaysとは別）
• 英語コメントを日本語に書き換えて終わり。

◆header

<!–ここからGoogle Maps v3用–>

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

◆script

<script type=”text/javascript”>

var directionDisplay;

var directionsService = new google.maps.DirectionsService();

var map;

var origin = null;

var destination = null;

var waypoints = [];

var directionmarkers = [];

var directionsVisible = false;

function initialize()

{

directionsDisplay = new google.maps.DirectionsRenderer(

{

‘draggable': true//◆追加

});

var chicago = new google.maps.LatLng(35.68407, 139.63623);

var myOptions =

{

zoom:13,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: chicago

}

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById(“directionsPanel”));

google.maps.event.addListener(map, ‘click’, function(event)

{

if (origin == null)

{

origin = event.latLng;

addMarker(origin);

}

else if (destination == null)

{

destination = event.latLng;

addMarker(destination);

}

else

{

if (waypoints.length < 9)

{

waypoints.push({ location: destination, stopover: true });

destination = event.latLng;

addMarker(destination);

}

else

{

alert(“Way Pointは、これ以上設定できません。”);

}

}

});

}

function addMarker(latlng)

{

directionmarkers.push(new google.maps.Marker(

{

position: latlng,

map: map,

icon: “http://maps.google.com/mapfiles/marker” + String.fromCharCode(directionmarkers.length + 65) + “.png”

}));

}

function calcRoute()

{

if (origin == null)

{

alert(“Click on the map to add a start point”);

return;

}

if (destination == null)

{

alert(“Click on the map to add an end point”);

return;

}

var mode;

switch (document.getElementById(“mode”).value)

{

case “driving”:

mode = google.maps.DirectionsTravelMode.DRIVING;

break;

case “walking”:

mode = google.maps.DirectionsTravelMode.WALKING;

break;

}

var request =

{

origin: origin,

destination: destination,

waypoints: waypoints,

travelMode: mode,

optimizeWaypoints: document.getElementById(‘optimize’).checked,

avoidHighways: document.getElementById(‘highways’).checked,

avoidTolls: document.getElementById(‘tolls’).checked

};

directionsService.route(request, function(response, status)

{

if (status == google.maps.DirectionsStatus.OK)

{

directionsDisplay.setDirections(response);

}

});

clearMarkers();

directionsVisible = true;

}

function updateMode()

{

if (directionsVisible)

{

calcRoute();

}

}

function clearMarkers()

{

for (var i = 0; i < directionmarkers.length; i++)

{

directionmarkers[i].setMap(null);

}

}

function clearWaypoints()

{

directionmarkers = [];

origin = null;

destination = null;

waypoints = [];

directionsVisible = true;

}

function reset()

{

clearMarkers();

clearWaypoints();

directionsDisplay.setMap(null);

directionsDisplay.setPanel(null);

directionsDisplay = new google.maps.DirectionsRenderer();

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById(“directionsPanel”));

}

</script>

◆body内html

<table width=”719″ style=”width : 600px;”>

<tr>

<td width=”363″><input type=”checkbox” id=”optimize” checked=”checked” />ルート最適化・・・・アイコンの近い順に並び替え</td>

<td width=”227″><select id=”mode” onchange=”updateMode()”>

<option value=”driving”>自動車</option>

<option value=”walking”>徒歩</option>

</select>・・・・自転車は削除</td>

</tr><tr>

<td width=”363″><input type=”checkbox” id=”highways”  />一般道優先・・・・チェックすると高速を使わない</td>

<td width=”227″><input type=”button” value=”Reset” onclick=”reset()” />・・・・アイコン消去</td>

</tr><tr>

<td width=”363″><input type=”checkbox” id=”tolls” />有料道路を避ける・・・・チェックすると有料道路(高速を除く)を使わない</td>

<td width=”227″><input type=”button” value=”Get Directions!” onclick=”calcRoute()” />・・・・ルート収得</td>

</tr>

</table>

◆サンプルページ

• マップ（地図）をクリックしてルート経路検索

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク