前回、プレイスライブラリを使って特定のタイプの店や施設を検索してマーカーを地図上に表示しました。前回はnearbySearchメソッドを使ってタイプを指定して検索しましたが、今回はテキスト検索を使ったサンプルコードを作成しました。
デモ表示へ
前回は、PlaceSearchRequestオブジェクトを使って検索項目を指定しましたが、今回は、TextSearchRequestオブジェクトを使って検索内容を設定します。
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#TextSearchRequest
前回のサンプルコードに対し、下記太字部分を変更します。
$scope.placeSearch = function (place) {
var request = {
location: {
lat: $scope.map.center.latitude,
lng: $scope.map.center.longitude
},
radius: place.radius,
query: place.query
};
var map = $scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
return;
};
関連記事の目次- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- google-mapディレクティブを使って地図を表示
- 地図上に複数のマーカーを表示する
- マーカーをクリックして情報ウィンドウを表示
- マーカーでイベントを処理
- 重複して表示されるマーカーをクラスター化する方法
- 交通レイヤを表示する方法
- ルートサービスを使って簡単な徒歩ルートを表示する
- 経由地を指定して徒歩ルートを表示する
- ルート計算の結果をテキストでも表示する
- ドラッグ可能なルートを表示し、結果をテキストでも表示
- ルートサービスで表示するルートの線の色、太さを設定する方法
- Fusionテーブルのデータを地図上にマーカーとして表示
- 逆ジオコーディングで地図上クリックで住所を表示
- ジオコーディングを使って入力した住所にマーカーを表示
- 地図とストリートビューを並べて表示
- クリックした地点のストリートビューを表示
- 地図上にGoogleアドセンスの広告を表示
- パノラミオ(Panoramio)の写真を表示
- パノラミオ(Panoramio)の写真をタグでフィルタして表示
- プレイスライブラリで店や施設を表示(1)nearbySearch
- プレイスライブラリで店や施設を表示(2)テキスト検索
- プレイスライブラリで店や施設を表示(3)詳細情報表示
- 地図に独自のスタイルを設定
- 地図上にラインを表示
- プレイスライブラリで店や施設を表示(4)オートコンプリート
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- google-mapディレクティブを使って地図を表示
- 地図上に複数のマーカーを表示する
- マーカーをクリックして情報ウィンドウを表示
- マーカーでイベントを処理
- 重複して表示されるマーカーをクラスター化する方法
- 交通レイヤを表示する方法
- ルートサービスを使って簡単な徒歩ルートを表示する
- 経由地を指定して徒歩ルートを表示する
- ルート計算の結果をテキストでも表示する
- ドラッグ可能なルートを表示し、結果をテキストでも表示
- ルートサービスで表示するルートの線の色、太さを設定する方法
- Fusionテーブルのデータを地図上にマーカーとして表示
- 逆ジオコーディングで地図上クリックで住所を表示
- ジオコーディングを使って入力した住所にマーカーを表示
- 地図とストリートビューを並べて表示
- クリックした地点のストリートビューを表示
- 地図上にGoogleアドセンスの広告を表示
- パノラミオ(Panoramio)の写真を表示
- パノラミオ(Panoramio)の写真をタグでフィルタして表示
- プレイスライブラリで店や施設を表示(1)nearbySearch
- プレイスライブラリで店や施設を表示(2)テキスト検索
- プレイスライブラリで店や施設を表示(3)詳細情報表示
- 地図に独自のスタイルを設定
- 地図上にラインを表示
- プレイスライブラリで店や施設を表示(4)オートコンプリート