Googleマップで出発地と目的地間のルートを表示する（angular-google-maps）
AngularJSのGoogleマップ用ライブラリ「angular-google-maps」を使って、マップ上に設定した出発地と目的地間のルートを表示する方法です。ライブラリを使うために必要なものについては、「WebサイトにGoogleマップを埋め込む」の記事を確認して下さい。
目次
- コード
- 動作確認
- ちょっと一言
- 参考リンク
コード
関係ないコードについては極力削除しています。また、動作確認用のコードは除外しているので、適宜、補完して下さい。
◆html
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" ng-if="map">
</ui-gmap-google-map>
◆javascript
myApp.controller('exampleCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
uiGmapGoogleMapApi.then(function(maps) {
// 出発地、経由地、目的地のデータ
var data = [
{ lat: 35.681167, lng: 139.767052, title: "東京駅" }, // 出発地
{ lat: 35.683991, lng: 139.757725, title: "国立国会図書館" }, // 経由地１
{ lat: 35.685175, lng: 139.7528, title: "皇居" }, // 経由地２
{ lat: 35.693318, lng: 139.749885, title: "日本武道館" }, // 経由地３
{ lat: 35.630494, lng: 139.783093, title: "東京ビッグサイト" } // 目的地
];
// 経由地の登録
var waypoints = [];
for (var i = 1; i < data.length - 1; i++){
waypoints.push({ location: data[1].title, stopover: true });
}
$scope.map = {
center: { latitude: data[0].lat, longitude: data[0].lng },
zoom: 12,
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
};
// ルート表示処理
var directionsService = new maps.DirectionsService();
var directionsDisplay = new maps.DirectionsRenderer();
uiGmapIsReady.promise().then(function(instances) {
directionsDisplay.setMap(instances[0].map);
directions(maps);
});
function directions(maps) {
var request = {
origin: data[0].lat + ", " + data[0].lng,
destination: data[data.length - 1].title,
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: maps.TravelMode['DRIVING'] // DRIVING（デフォルト）、BICYCLING、TRANSIT、WALKING
};
directionsService.route(request, function (response, status) {
console.log(status, response);
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
});
上記のコードではルート出発地のみ「緯度・経度」で指定しています。それ以外の経由地と目的地は「地名」を指定していますが、どちらの方法でも大丈夫なようです。「緯度・経度」で指定した場合、地上の情報ウィンドウに地名が表示されないようなので、位置を特定できる場所については「地名」、特定できない場所は「緯度・経度」を設定するとよさげです。
動作確認
経由地：
モード：
日本では自転車ルート（BICYCLING）、公共交通機関ルート（TRANSIT）は使えないようです。また、「Google Maps Directions API」を有効にしていない場合は以下のようなエラーが出ます。
Directions Service: This API project is not authorized to use this API. Please ensure this API is activated in
ちょっと一言
angular-google-mapsの場合、ルートを表示するためには、google mapのサービスを直接扱うような感じになってしまうので、代替手段として掲示されているangularjs-google-mapsを利用した方が簡単に実装できそうです。ざっと確認しただけですが、デモサイトもこちらの方が充実しています。