タイトル通り、GoogleMapのナビゲーション機能で、経由地を追加する方法です。
HTMLに直接マップを埋め込み、検索する方法と、Maps URLを利用する方法がありますが、今回は前者についてまとめます。
まず、GoogleMapを使用する事前準備として、APIキーを取得します。
下記のページから取得できますが、クレジットカード情報を入力する必要がありますので、ご用意ください。
Google Maps Platform
https://cloud.google.com/maps-platform/?hl=ja
また、無料トライアル期間がありますが、それを過ぎると有料になりますので、その点もご承知おきください。
なお、操作をしないと有料サービスには移行しませんので、ご安心ください。
無事APIキーが取得出来たら、あとは下記コードをコピー＆ペーストするだけ。
参考にさせていただいたサイトがあったのですが、どのサイトなのかメモをし忘れてしまいました…。
まず、headタグ内で、下記を指定します
<script src="http://maps.google.com/maps?file=api&v=2&key=[APIキー]&sensor=false" type="text/javascript" charset="utf-8"></script>
body は下記のように記述しました
<body onload="initialize()" onunload="GUnload()">
<form>
<input type="text" size="20" id="from" value="出発地点" />
--><input type="text" size="20" id="step1" value="経由地1" />
--><input type="text" size="20" id="step2" value="経由地2" />
--><input type="text" size="20" id="to" value="到着地点" />
<input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
</form>
<div id="map_canvas" style="width: 100%; height: 350px"></div>
<div id="route" style="width: 100%; height: 200px;overflow: scroll"></div>
</body>
JavaScrip は以下のとおりです。
var map;
var directions;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(35.681379,139.765577), 13);
directions = new GDirections(map, document.getElementById('route'));
}
}
function dispRoute() {
var from = document.getElementById("from").value; // 出発先
var step1 = document.getElementById("step1").value; // 経由地1
var step2 = document.getElementById("step2").value; // 経由地2
var to = document.getElementById("to").value; // 目的地
directions.clear();
var pointArray = [from, step1, step2, to];
directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});
}
bodyが読み込まれたタイミングで initialize() を実行してマップを表示し、ルート検索ボタンをクリックすると、dispRoute()が実行されます。
なお、今回はテストとして、経由地を2か所指定してあります。
で、上記を実行したところ、当然ではありますが、2点の経由地を通るルート検索を無事に行うことができました。
以上、JavaScriptを使ってGoogleMapで経由地ありのルート検索を行う方法でした。
機能としては、やはりGoogleMapはとても優秀ですね。
デザインを凝るならMapboxがおすすめですが、ナビゲーション機能とか、あとは日本語対応している点では、GoogleMapが優れていると思います。
ナビゲーション機能重視なら、GoogleMapをおすすめします。
開発したい機能に応じて使い分けてください。
