VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップ(22)プレイスライブラリで店や施設を表示(3)詳細情報表示

プレイスライブラリの検索結果に対し、より詳細な情報を取得しマーカーウィンドウに表示するサンプルコードを作成しました。

(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マップの他の記事の目次

モバイルバージョンを終了