AngularJSを使ってGoogleマップ（２０）プレイスライブラリで店や施設を表示（１）nearbySearch

wp-admin

8年前

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

（１）サンプルコード

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

　
１）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 
　

４）表示済みのマーカーを消す

　

一度検索してマーカーが表示され、再度検索を行うと一度目と二度目の両方の検索検索結果がマーカーとして表示されてしまいます。

　

表示済みのマーカーを削除する関数を定義します。

　

$scope.removeMarkers = function () {

　$scope.map.markers.length = 0;

};

　

AngularJS、Googleマップの他の記事の目次