【JavaScript】GoogleMapのルート検索機能で経由地追加する方法│株式会社シーポイントラボ

タイトル通り、GoogleMapのナビゲーション機能で、経由地を追加する方法です。
HTMLに直接マップを埋め込み、検索する方法と、Maps URLを利用する方法がありますが、今回は前者についてまとめます。

まず、GoogleMapを使用する事前準備として、APIキーを取得します。
下記のページから取得できますが、クレジットカード情報を入力する必要がありますので、ご用意ください。

Google Maps Platform
https://cloud.google.com/maps-platform/?hl=ja

また、無料トライアル期間がありますが、それを過ぎると有料になりますので、その点もご承知おきください。

なお、操作をしないと有料サービスには移行しませんので、ご安心ください。

無事APIキーが取得出来たら、あとは下記コードをコピー＆ペーストするだけ。
参考にさせていただいたサイトがあったのですが、どのサイトなのかメモをし忘れてしまいました…。

まず、headタグ内で、下記を指定します

1	`<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をおすすめします。
開発したい機能に応じて使い分けてください。

【JavaScript】GoogleMapのルート検索機能で経由地追加する方法

【JavaScript】Mapboxの「There is already a source with this ID」エラーの対処法

【Cordova】アプリでiBeaconを扱うための「cordova-plugin-ibeacon」が動作しない【未解決】

株式会社シーポイントラボ