google maps api ドラッグする度にスポットを検索する地図

Google Maps JavaScript Apiを利用し、
現在位置付近のスポット情報をマーカーで示すサンプルを紹介します。

このサンプルは、現在地より半径「2km以内」の「病院」を検索します。
マーカーをクリック(タップ)すると、その施設の名前が吹き出しで表示されます。
地図をドラッグする度に、付近にある特定のスポットを検索し、
スポットにマーカーを置きます。

以下の地図の改良版です。

Google Maps Apiで現在地のスポット情報をマーカーで示すサンプル

今回はこのような形で表示できます。

地図をドラッグして動かすと、地図の中心から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>

以上、試してみてください。