前提・実現したいこと
GoogleMapAPIを使用して現在地からクリック(タップ)した地点へのルート検索を行いたいです。
現在地を取得しplacesAPIで周辺の施設を地図上にマーカーとして表示しました。
そのマーカーをクリックするとその地点へのルートを表示できるようにしたいです。
発生している問題・エラーメッセージ
現状
- 現在地を取得しplacesAPIで周辺の施設を地図上にマーカーとして表示しました。
該当のソースコード
JavaScript
1<script> 2function initMap() { 3 var target = document.getElementById('gmap'); 4 var tokyo = {lat: 35.681167, lng: 139.767052}; //東京駅の緯度経度 5 var map = new google.maps.Map(document.getElementById('gmap'), { 6 center: tokyo, 7 zoom: 16 8 }); 9 10 //情報ウィンドウのインスタンスの生成(後でマーカーに紐付け) 11 var infowindow = new google.maps.InfoWindow(); 12 13 //PlacesService のインスタンスの生成(引数に map を指定) 14 var service = new google.maps.places.PlacesService(map); 15 16 if(!navigator.geolocation){ 17 //情報ウィンドウの位置をマップの中心位置に指定 18 infowindow.setPosition(map.getCenter()); 19 //情報ウィンドウのコンテンツを設定 20 infowindow.setContent('Geolocation に対応していません。'); 21 //情報ウィンドウを表示 22 infowindow.open(map); 23 } 24 25 //ブラウザが対応している場合、position にユーザーの位置情報が入る 26 navigator.geolocation.getCurrentPosition(function(position) { 27 //position から緯度経度(ユーザーの位置)のオブジェクトを作成し変数に代入 28 var pos = { 29 lat: position.coords.latitude, 30 lng: position.coords.longitude 31 }; 32 //情報ウィンドウに現在位置を指定 33 infowindow.setPosition(pos); 34 //情報ウィンドウのコンテンツを設定 35 infowindow.setContent('現在位置を取得しました。'); 36 //情報ウィンドウを表示 37 infowindow.open(map); 38 //マップの中心位置を指定 39 map.setCenter(pos); 40 41 //種類(タイプ)やキーワードをもとに施設を検索(プレイス検索)するメソッド nearbySearch() 42 service.nearbySearch({ 43 location: pos, //検索するロケーション 44 radius: 10000, //検索する半径(メートル) 45 name: '避難所' //タイプで検索。文字列またはその配列で指定 46 //キーワードで検索する場合は name:'レストラン' や ['レストラン','中華'] のように指定 47 48 }, callback); //コールバック関数(callback)は別途定義 49 50 //コールバック関数には results, status が渡されるので、status により条件分岐 51 function callback(results, status) { 52 // status は以下のような定数で判定(OK の場合は results が配列で返ってきます) 53 if (status === google.maps.places.PlacesServiceStatus.OK) { 54 //results の数だけ for 文で繰り返し処理 55 for (var i = 0; i < results.length; i++) { 56 //createMarker() はマーカーを生成する関数(別途定義) 57 createMarker(results[i]); 58 } 59 } 60 } 61 }, function() { //位置情報の取得をユーザーがブロックした場合のコールバック 62 //情報ウィンドウの位置をマップの中心位置に指定 63 infowindow.setPosition(map.getCenter()); 64 //情報ウィンドウのコンテンツを設定 65 infowindow.setContent('Error: Geolocation が無効です。'); 66 //情報ウィンドウを表示 67 infowindow.open(map); 68 }); 69 70 //マーカーを生成する関数(引数には検索結果の配列 results[i] が入ってきます) 71 function createMarker(place) { 72 //var placeLoc = place.geometry.location; 73 var marker = new google.maps.Marker({ 74 map: map, 75 position: place.geometry.location //results[i].geometry.location 76 }); 77 78 //マーカーにイベントリスナを設定 79 marker.addListener('click', function() { 80 infowindow.setContent(place.name); //results[i].name 81 infowindow.open(map, this); 82 }); 83 } 84} 85 86</script>
補足情報(FW/ツールのバージョンなど)
以下のサイトを参考に制作しました。
https://www.webdesignleaves.com/pr/plugins/googlemap_01.html
よろしくお願いします。
あなたの回答
tips
プレビュー