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

（１）サンプルコード

　
デモ表示へ
　

（２）サンプルコードの内容

　
１）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'
        });
    }]

　
２）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);

　
３）検索結果をマーカーとして表示
　
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();
}

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

関連記事の目次