プレイスライブラリの検索結果に対し、より詳細な情報を取得しマーカーウィンドウに表示するサンプルコードを作成しました。
(1)サンプルコード
デモ表示へ
(2)サンプルコードの内容
1)プレイス詳細リクエスト
前回、前々回に使用したnearbySearchリクエストやテキスト検索を行うと検索結果がPlaceResultオブジェクトに格納され返されます。
このPlaceResultオブジェクトのreference属性を指定してgetDetails()メソッドを実行して詳細情報を取得します。
var createMarker = function (place) { var request = { reference: place.reference }; var detail = new google.maps.places.PlacesService($scope.map.control.getGMap()); detail.getDetails(request, function(result, status) { if (status == google.maps.places.PlacesServiceStatus.OK) {
2)プレイス詳細結果
詳細リクエストの結果は、PlaceResult オブジェクトに格納されて返されます。
このサンプルコードでは下記属性を取得して表示しています。
・name:プレイスの名前。
・formatted_phone_number:電話番号計画の形式に従ったプレイスの電話番号
・website:会社のホームページなど、当該プレイスの公式ウェブサイト
・html_attributions:このプレイス結果に対して表示する帰属テキスト
・types: このプレイスのタイプの配列([“political”, “locality”] または [“restaurant”, “establishment”])
AngularJS、Googleマップの他の記事の目次
- 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)オートコンプリート