Google Maps JavaScript Apiを利用し、
現在位置付近のスポット情報をマーカーで示すサンプルを紹介します。
このサンプルは、現在地より半径「2km以内」の「病院」を検索します。
マーカーをクリック(タップ)すると、その施設の名前が吹き出しで表示されます。
地図をドラッグする度に、付近にある特定のスポットを検索し、
スポットにマーカーを置きます。
以下の地図の改良版です。
今回はこのような形で表示できます。
地図をドラッグして動かすと、地図の中心から2km以内の病院が表示されます。
サンプル
まずは動作サンプルを確認してください。
セッティング
マップの利用にはAPIキーの取得が必要です。
APIキーの取得方法に関しては、こちらの記事が参考になりました。
http://bashalog.c-brains.jp/17/08/25-200000.php
さらに、Google Maps JavaScript Apiは、SSL認証されているURLでなければ表示できないようです。
表示する際のページURLはhttps://で始まるURLにしてください。
プレイスタイプは以下のページに一覧で載っています。
https://developers.google.com/places/supported_types
参考ページ
Google Maps Api のリファレンスの以下ページを参考にして自分で改良しました。
マーカーを消す
https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=ja
スポット情報を検索
https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=ja
html
<div id="map"></div>
Javascript
<script> var map; var infowindow; var markers = []; function getLocation(){ // 位置情報を取得する navigator.geolocation.getCurrentPosition( function(position) { // 現在地の緯度経度所得 var latitude = position.coords.latitude; var longitude = position.coords.longitude; var latlng = new google.maps.LatLng( latitude , longitude ) ; // 現在地の緯度経度を中心にマップを生成 map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 15 }); // 地図ドラッグ時のイベント map.addListener( "dragend", function () { clearMarkerAll(map);//一度マーカーをすべて消す var response = map.getCenter() ; service.nearbySearch({ location: response, radius: 2000,//2km type: ['hospital'] }, callback); }); //現在地から2キロ以内の病院を検索 infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.nearbySearch({ location: latlng, radius: 2000,//2km type: ['hospital'] }, callback); },function(error) { // 失敗時の処理 alert('エラー:' + error); }); } function callback(results, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { createMarker(results[i]); } } } //地図上にマーカーを生成 function createMarker(place) { var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); markers.push(marker);//重要 引数を関数の外にで使えるようにする。 //地図上のマーカーをクリックした際の動作、吹き出しの中身 google.maps.event.addListener(marker, 'click', function() { infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + '評価: ' + place.rating + '</div>'); infowindow.open(map, this); }); } //マーカーを消す function clearMarkerAll(map) { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=自分のapiキー&language=ja&libraries=drawing,geometry,places,visualization&callback=getLocation" async defer></script>
CSS
<style> #map { height: 80%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
以上、試してみてください。