AngularJSを使ってGoogleマップ(20)プレイスライブラリで店や施設を表示(1)nearbySearch

プレイスライブラリを使って特定のタイプの店や施設を検索してマーカーとして地図上に表示するサンプルコードを作成しました。

(1)サンプルコード


 
デモ表示へ
 

(2)サンプルコードの内容


 
1)placesライブラリを使用する
 

mapApp.config(
    ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
        GoogleMapApiProviders.configure({
          key: 'your Google Map api key',
          v: '3', //defaults to latest 3.X anyhow
          libraries: 'weather,geometry,visualization,places'
        });
    }]

 
2)PlacesServiceを使って検索
 
下記のようにPlacesServiceのnearbySearchメソッドに検索条件を指定します。
 
検索条件は、PlaceSearchRequestオブジェクトを使用します。
 
プレイスのタイプで指定出来る項目は下記参照。
https://developers.google.com/places/documentation/supported_types?hl=ja
 

var request = {
  location: {
     lat: $scope.map.center.latitude,
     lng: $scope.map.center.longitude
  },
  radius: place.radius,
  types: [place.types]
};
var map = $scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map);

service.nearbySearch(request, callback);

 
3)検索結果をマーカーとして表示
 
nearbySearchメソッドで指定したコールバック関数で、検索結果をマーカーとして表示します。

var callback = function (results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}
var createMarker = function (place) {
  $scope.map.markers.push({
    id: id,
    latitude: place.geometry.location.lat(),
    longitude: place.geometry.location.lng(),
    showWindow: false,
    name: place.name
  });
  $scope.$apply();
}

 
4)表示済みのマーカーを消す
 
一度検索してマーカーが表示され、再度検索を行うと一度目と二度目の両方の検索検索結果がマーカーとして表示されてしまいます。
 
表示済みのマーカーを削除する関数を定義します。
 
$scope.removeMarkers = function () {
 $scope.map.markers.length = 0;
};
 
AngularJS、Googleマップの他の記事の目次

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です