以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

プレイス ライブラリ

概要

Google Places JavaScript ライブラリ内の機能により、マップの範囲や固定ポイントの周囲などの定義された領域内に含まれるプレイス(施設、地理的位置、または有名なスポットなどとしてこの API で定義されたプレイス)を、アプリケーションが検索できるようになります。

Google Places API はオートコンプリート機能を提供します。これを使用して、Google マップ検索フィールドの予測入力検索動作をアプリケーションに組み込むことができます。ユーザーが住所の入力を開始すると、オートコンプリートによって残りが入力されます。詳細については、オートコンプリートのドキュメントをご覧ください。

はじめに

Google Maps JavaScript API でプレイス ライブラリを使用するには、まず Google API Console で Google Maps JavaScript API をセットアップしたプロジェクトで、Google Places API Web Service が有効になっていることを確認します。

有効な API のリストを表示するには:

  1. Google API Console に移動します。
  2. [Select a project] ボタンをクリックし、Google Maps JavaScript API を設定している同じプロジェクトを選択して、[Open] をクリックします。
  3. [Dashboard] の API リストで、Google Places API Web Service を探します。
  4. リストに API が表示されていれば、準備は完了です。API がリストに表示されていない場合は、次の手順で有効にします。
    1. ページの上部にある [ENABLE API] を選択し、[Library] タブを表示します。または、左側のメニューで [Library] を選択します。
    2. Google Places API Web Service を検索し、結果のリストからこの API を選択します。
    3. [ENABLE] を選択します。このプロセスを完了すると、[Dashboard] の API リストに Google Places API Web Service が表示されます。

ライブラリのロード

プレイス サービスは、メインの Maps JavaScript API コードから独立した別のライブラリです。このライブラリの機能を使うには、まず Maps API のブートストラップ URL の中で libraries パラメータを用いてライブラリをロードする必要があります。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

詳細については、ライブラリの概要をご覧ください。

使用制限とポリシー

割り当て

Google Places API Web Service と Places Autocomplete は、Google Places API Web Service の使用制限に関するドキュメントで説明されているように割り当て量を共有します。この使用制限は、Places Library in the Google Maps JavaScript API を使用する際にも適用されます。1 日あたりの使用量は、クライアント側およびサーバー側のリクエストの合計数で計算されます。

ポリシー

Places Library in the Google Maps JavaScript API を使用するには、Google Places API Web Service を対象とするポリシーに従う必要があります。

プレイス検索

プレイス サービスを使用すると、次の 4 種類の検索を実行できます。

  • 周辺検索は、ユーザーの現在地に基づいて周辺のプレイスの一覧を返します。
  • テキスト検索は、「ピザ」などの検索文字列に基づいて周辺のプレイスの一覧を返します。
  • レーダー検索は、指定された検索半径内の多数のプレイスのリストを返しますが、周辺検索やテキスト検索より情報の詳細度は低くなります。
  • プレイス詳細リクエストは、ユーザーのクチコミなど、特定のプレイスに関する詳細情報を返します。

返される情報には、施設(レストラン、お店、オフィスなど)に加え、住所、市区町村などの行政区画を含むジオコード結果、およびその他の有名スポットなどが含まれます。

周辺検索リクエスト

周辺検索では、指定された範囲内で、キーワードやタイプによるプレイス検索が可能です。周辺検索には、次のいずれかの方法で指定して、場所を含める必要があります。

  • LatLngBounds
  • LatLng オブジェクトとして円の中心を指定する location プロパティとメートル単位で計測された半径の組み合わせで定義される円形の領域。

プレイス周辺検索は、PlacesServicenearbySearch() メソッドを呼び出して開始されます。このメソッドは、PlaceResult オブジェクトの配列を返します。バージョン 3.9 以降では、nearbySearch() メソッドが search() メソッドの代わりに使用されています。

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

このメソッドは、以下のフィールドを持つリクエストを受け付けます。

  • 次のいずれかです。
    • bounds: これは、長方形の検索領域を定義する google.maps.LatLngBounds オブジェクトです。
    • locationradius: 前者は google.maps.LatLng オブジェクトで指定し、後者はメートル単位で円の半径を表す単純な整数で指定します。指定可能な最大半径は 50,000 メートルです。rankBy を DISTANCE に設定すると、location を指定する必要がありますが、 radius または bounds は指定できません。
  • keyword(省略可能): このプレイスに対しすべての利用可能なフィールドと突き合わせるキーワードです。名前、タイプ、住所をはじめとして、ユーザーのクチコミや第三者のコンテンツも対象になります。
  • minPriceLevelmaxPriceLevel(省略可能): 指定した価格帯のプレイスに検索結果を限定します。有効な値の範囲は 0(最も安い)〜4(最も高い)です。
  • name(省略可能): プレイスの名前と突き合わせるキーワードです。指定した name 値を含むプレイスに検索結果が限定されます。プレイスには、リスト上の名前以外に、別の名前が関連付けられている場合もあります。API は渡された name 値とこれらのすべての名前との付き合わせを試行します。そのため、リスト上の名前が検索キーワードと一致しないプレイスでも、関連する別称が合致するのであれば、検索結果として返されます。
  • opennow(省略可能): クエリが送信された時点で営業しているプレイスのみがプレイス サービスによって返されるように示すブール値です。クエリにこのパラメータを指定した場合、Google プレイスのデータベースに営業時間が登録されていないプレイスは返されません。openNowfalse に設定しても効果はありません。
  • rankby(省略可能): 検索結果を並べる順序を指定します。有効な値は次のとおりです。
    • google.maps.places.RankBy.PROMINENCE(デフォルト)。このオプションを指定した場合は、プレイスの重要度で検索結果が並べられます。設定された半径内の重要度の高いプレイスが、一致するものの重要度が低い周辺プレイスより優先してランキングされます。重要度は、Google のインデックスでのプレイスのランキングや、グローバルな人気度などの要因によって決まります。google.maps.places.RankBy.PROMINENCE が指定されると、radius パラメータが必須となります。
    • google.maps.places.RankBy.DISTANCE。このオプションを指定した場合は、指定された location(必須)からの距離が近い順に検索結果が並べられます。RankBy.DISTANCE を指定すると、カスタムの boundsradius を指定できないことに注意してください。RankBy.DISTANCE を指定するときは、keywordnametype のうち 1 つ以上が必要です。
  • types: 指定したタイプと一致するプレイスに検索結果を限定します。指定できるタイプは 1 つだけです(複数のタイプを指定すると、最初のエントリの後に指定したタイプはすべて無視されます)。サポートされるタイプのリストをご覧ください。
  • typesサポート終了): サポートされるタイプを 1 つ以上含む配列。このサービスは、指定したタイプのセットに最適な結果セットを返します。

nearbySearch() にコールバック メソッドを渡して、結果オブジェクトと google.maps.places.PlacesServiceStatus レスポンスを処理する必要があります。

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

例を見る(place-search.html)

テキスト検索リクエスト

Google プレイスのテキスト検索サービスは、文字列に基づいて関連するプレイスの情報を返すウェブサービスです。たとえば、「東京のピザ屋」や「新宿駅周辺の靴店」を検索できます。このサービスは、テキスト文字列や場所の優先度設定と合致するプレイスのリストをレスポンスとして返します。検索レスポンスにはプレイスのリストが含まれます。レスポンス内のプレイスの詳細情報が必要な場合は、プレイス詳細リクエストを送信できます。

テキスト検索は、PlacesServicetextSearch() メソッドを呼び出して開始されます。

service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

このメソッドは、以下のフィールドを持つリクエストを受け付けます。

  • query必須): 検索対象のテキスト文字列(「レストラン」など)。プレイス サービスはこの文字列と一致する候補を、関連性の高い順に並べて結果として返します。type パラメータが検索リクエストでも使用されている場合は、このパラメータは省略可能です。
  • 省略可能:
    • opennow: クエリが送信された時点で営業しているプレイスのみがプレイス サービスによって返されるように示すブール値です。クエリにこのパラメータを指定した場合、Google プレイスのデータベースに営業時間が登録されていないプレイスは返されません。openNowfalse に設定しても効果はありません。
    • minPriceLevelmaxPriceLevel: 指定した価格帯のプレイスに検索結果を限定します。有効な値の範囲は 0(最も安い)〜4(最も高い)です。
    • 次のいずれかです。
      • bounds: 検索範囲の長方形を定義する google.maps.LatLngBounds オブジェクト。
      • locationradius: location パラメータと radius パラメータを使用すると、指定した範囲内を優先するように検索結果にバイアスをかけることができます。これによって、プレイス サービスが指定した範囲内を優先するように検索結果を絞り込むことができますが、指定した範囲外の結果が返されることもあります。location は google.maps.LatLng オブジェクトで指定し、radius はメートル単位で円の半径を表す単純な整数で指定します。指定可能な最大半径は 50,000 メートルです。
    • types: 指定したタイプと一致するプレイスに検索結果を限定します。指定できるタイプは 1 つだけです(複数のタイプを指定すると、最初のエントリの後に指定したタイプはすべて無視されます)。サポートされるタイプのリストをご覧ください。
    • typesサポート終了): サポートされるタイプを 1 つ以上含む配列。指定したいずれかのタイプと一致する結果が返されます。

textSearch() にコールバック メソッドを渡して、結果オブジェクトと google.maps.places.PlacesServiceStatus レスポンスを処理する必要があります。

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

レーダー検索リクエスト

レーダー検索では、指定された検索半径内で、キーワード、タイプ、または名前によるプレイス検索が可能です。レーダー検索では、周辺検索またはテキスト検索より多い結果が返されますが、結果に含まれるフィールドは少なくなります。PlacesService.getDetails() を呼び出して、レスポンス内の任意のプレイスの詳細情報を取得できます。

radarSearch() によって返される PlaceResult オブジェクトには、以下のプロパティのみが含まれます。

  • geometry.location
  • place_id
  • reference注:このページの廃止のお知らせに記載されている通り、place_id の導入により、reference は廃止されました)。

プレイスのレーダー検索は、PlacesServiceradarSearch() メソッドを呼び出して開始されます。このメソッドは、最大 200 個の PlaceResult オブジェクトの配列を返します。

service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);

このメソッドは、以下のフィールドを持つリクエストを受け付けます。

  • 次のいずれかです。
    • bounds: これは、長方形の検索領域を定義する google.maps.LatLngBounds オブジェクトです。
    • locationradius: 前者は google.maps.LatLng オブジェクトで指定し、後者はメートル単位で円の半径を表す単純な整数で指定します。指定可能な最大半径は 50,000 メートルです。
  • 少なくとも次のいずれかです。
    • keyword(省略可能): このプレイスに対しすべての利用可能なフィールドと突き合わせるキーワードです。名前、タイプ、住所をはじめとして、ユーザーのクチコミや第三者のコンテンツも対象になります。
    • name(省略可能): プレイスの名前と突き合わせるキーワードです。指定した name 値を含むプレイスに検索結果が限定されます。プレイスには、リスト上の名前以外に、別の名前が関連付けられている場合もあります。API は渡された name 値とこれらのすべての名前との付き合わせを試行します。そのため、リスト上の名前が検索キーワードと一致しないプレイスでも、関連する別称が合致するのであれば、検索結果として返されます。
    • types: 指定したタイプと一致するプレイスに検索結果を限定します。指定できるタイプは 1 つだけです(複数のタイプを指定すると、最初のエントリの後に指定したタイプはすべて無視されます)。サポートされるタイプのリストをご覧ください。
    • typesサポート終了): サポートされるタイプを 1 つ以上含む配列。このサービスは、指定したタイプのセットに最適な結果セットを返します。
  • 省略可能:
    • minPriceLevelmaxPriceLevel(省略可能): 指定した値の価格帯のプレイスに検索結果を限定します。有効な値の範囲は 0(最も安い)〜4(最も高い)です。
    • opennow: クエリが送信された時点で営業しているプレイスのみがプレイス サービスによって返されるように示すブール値です。クエリにこのパラメータを指定した場合、Google プレイスのデータベースに営業時間が登録されていないプレイスは返されません。openNowfalse に設定しても効果はありません。

radarSearch() にコールバック メソッドを渡して、PlaceResults オブジェクトと google.maps.places.PlacesServiceStatus を処理する必要があります。

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places,visualization" async defer></script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}

例を見る(place-radar-search.html)

検索レスポンス

ステータス コード

PlacesServiceStatus レスポンス オブジェクトには、リクエストのステータスが含まれます。プレイス リクエストが失敗した原因を追跡できるようにデバッグ情報が含まれることもあります。有効なステータス値は次のとおりです。

  • ERROR:Google サーバーへの接続で問題が発生しました。
  • INVALID_REQUEST:リクエストが無効です。
  • OK:有効な結果がレスポンスに含まれています。
  • OVER_QUERY_LIMIT:ウェブページは、そのリクエスト割り当て数を超過しました。
  • REQUEST_DENIED:ウェブページで PlacesService を利用できません。
  • UNKNOWN_ERROR:サーバー エラーにより PlacesService リクエストを処理できませんでした。再度リクエストすると、成功する可能性があります。
  • ZERO_RESULTS:このリクエストに対する結果は見つかりませんでした。

プレイス検索結果

nearbySearch() および textSearch() 関数は、 PlaceResult オブジェクトの配列を返します。radarSearch() 関数は、上で説明した通り、PlaceResult のフィールドのサブセットを返します。

PlaceResult オブジェクトには、次のプロパティが含まれることがあります。

  • formatted_address は、このプレイスの住所が人の読める形式で含まれる文字列です。ほとんどの場合、この住所は「郵便の宛先」と同一です。formatted_address プロパティが返されるのは、テキスト検索の場合のみです。
  • geometry:プレイスのジオメトリに関する情報です。次の情報が含まれます。
    • location は、プレイスの緯度と経度を提供します。
    • viewport は、このプレイスを表示するときのマップ上の優先ビューポートを定義します。
  • html_attributions:検索結果の表示時に表示する必要がある属性の配列です。配列内の各エントリには、単一の属性の HTML テキストが含まれています。注: これは、検索レスポンス全体のすべての属性が集約されたものです。したがって、レスポンス内のすべての PlaceResult オブジェクトには同一の属性リストが含まれます。
  • icon:このプレイスのタイプを表すために使用できる画像リソースへの URL です。
  • id: このプレイスを示す一意の ID が含まれます。この ID を使用してこのプレイスに関する情報を取得することはできませんが、このプレイスに関するデータを統合したり、個々の検索でプレイス ID を確認したりできます。ID は変更されることがあるので、保存したプレイスの ID を、後で同じプレイスに対して実行する詳細リクエストで返される ID と比較し、必要に応じてアップデートすることをお勧めします。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、id は廃止されました。
  • name:プレイスの名前。
  • opening_hours には、次の情報が含まれます。
    • open_now は、プレイスが現在営業しているかどうかを示す Boolean 型の値です。
  • place_id は、プレイスを一意に識別するテキスト表記の ID です。プレイスの情報を取得するには、この ID を プレイス詳細リクエストplaceid フィールドに渡します。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。
  • rating には、ユーザーのクチコミの集計に基づくプレイスの評価(0.0〜5.0)が含まれます。
  • reference には、今後詳細サービスへのクエリで使用できるトークンが含まれます。このトークンは、詳細サービスへのリクエストで使用される reference とは異なる場合があります。保存したプレイスの reference は定期的にアップデートすることをお勧めします。このトークンはプレイスを一意に識別しますが、その逆は成り立ちません。プレイスには複数の有効な reference トークンがある場合があります。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、reference は廃止されました。
  • types: このプレイスのタイプの配列です(例: ["political", "locality"] または ["restaurant", "lodging"])。
  • vicinity:プレイスの簡単な住所です。番地や市町村などが含まれ、州、都道府県、郵便番号、国などは含まれません。たとえば、Google のオーストラリア、シドニー オフィスの場合、vicinity 値は 5/48 Pirrama Road, Pyrmont になります。

追加結果へのアクセス

デフォルトでは、各プレイス検索は 1 つのクエリに対して最大 20 件の結果を返します。ただし、各検索では、3 ページに分けて最大 60 件の結果を返すことができます。追加ページは、PlaceSearchPagination オブジェクトを介して利用できます。追加ページにアクセスするには、コールバック関数を使用して PlaceSearchPagination オブジェクトを取得する必要があります。PlaceSearchPagination オブジェクトは、次のように定義されます。

  • hasNextPage: 追加の結果が存在するかどうかを示すブール値プロパティです。追加結果ページが存在する場合は true です。
  • nextPage(): 次の結果セットを返す関数です。結果の実行後、結果の次のページが利用可能になるまで 2 秒待機する必要があります。

次の結果セットを表示するには、nextPage を呼び出します。次の結果ページを表示する前に、それ以前のページを表示する必要があります。なお、検索 1 回でリクエスト 1 回分の割り当て量を使用することになります。

下の例は、コールバック関数を変更して PlaceSearchPagination オブジェクトを取得し、複数の検索リクエストを発行できるようにする方法を示しています。

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}
<div id="map"></div>
<div id="right-panel">
  <h2>Results</h2>
  <ul id="places"></ul>
  <button id="more">More results</button>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -195px;
  height: 330px;
  width: 200px;
  padding: 5px;
  z-index: 5;
  border: 1px solid #999;
  background: #fff;
}
h2 {
  font-size: 22px;
  margin: 0 0 5px 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 271px;
  width: 200px;
  overflow-y: scroll;
}
li {
  background-color: #f1f1f1;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
li:nth-child(odd) {
  background-color: #fcfcfc;
}
#more {
  width: 100%;
  margin: 5px 0 0 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}

例を見る(place-search-pagination.html)

プレイス詳細

領域内のプレイスのリストを表示する他に、プレイス サービスは特定のプレイスに関する詳細情報を返すことができます。プレイス検索レスポンスでプレイスが返されると、そのプレイス ID を使用して該当プレイスの詳細情報をリクエストできます。詳細情報には、完全な住所、電話番号、ユーザーの評価とレビューなどが含まれます。(プレイスの reference を使用してもプレイスの詳細を取得できますが、このページの廃止のお知らせに記載されている通り、このフィールドはプレイス ID の導入により廃止されました)。

プレイス詳細リクエスト

プレイス詳細は、サービスの getDetails() メソッドを呼び出すことでリクエストされます。

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

このメソッドは、必要なプレイスの placeId または reference を含むリクエストを受け取ります。このページの廃止のお知らせに記載されている通り、placeId の導入により、reference は廃止されました。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。

また、このメソッドは、コールバック メソッドも受け取ります。このコールバック メソッドでは、google.maps.places.PlacesServiceStatus レスポンスに渡されたステータス コード、および google.maps.places.PlaceResult オブジェクトを処理する必要があります。

var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

例を見る(place-details.html)

プレイス詳細レスポンス

ステータス コード

PlacesServiceStatus レスポンス オブジェクトには、リクエストのステータスが含まれます。プレイス詳細リクエストが失敗した原因を追跡できるようにデバッグ情報が含まれることもあります。有効なステータス値は次のとおりです。

  • ERROR:Google サーバーへの接続で問題が発生しました。
  • INVALID_REQUEST:リクエストが無効です。
  • OK:有効な結果がレスポンスに含まれています。
  • OVER_QUERY_LIMIT:ウェブページは、そのリクエスト割り当て数を超過しました。
  • NOT_FOUND: 参照先の場所がプレイス データベースで見つからなかったことを示します。
  • REQUEST_DENIED:ウェブページで PlacesService を利用できません。
  • UNKNOWN_ERROR:サーバー エラーにより PlacesService リクエストを処理できませんでした。再度リクエストすると、成功する可能性があります。
  • ZERO_RESULTS:このリクエストに対する結果は見つかりませんでした。

プレイス詳細の結果

getDetails() の呼び出しが成功すると、次のプロパティを含む PlaceResult オブジェクトが返されます。

  • address_components:このプレイスの場所の住所コンポーネントの集合。詳細については、ジオコーディング サービスの住所コンポーネントのタイプをご覧ください。
  • formatted_address:プレイスの完全アドレス。
  • formatted_phone_number:電話番号の地域慣例に従ってフォーマットされたプレイスの電話番号。
  • geometry:プレイスのジオメトリに関する情報です。次の情報が含まれます。
    • location は、プレイスの緯度と経度を提供します。
    • viewport は、このプレイスを表示するときのマップ上の優先ビューポートを定義します。
  • html_attributions:このプレイス結果に対して表示される属性テキスト。
  • icon:このプレイスのタイプを表すために使用できる画像リソースへの URL です。
  • id: このプレイスを示す一意の ID が含まれます。この ID を使用してこのプレイスに関する情報を取得することはできませんが、このプレイスに関するデータを統合したり、個々の検索でプレイス ID を確認したりできます。ID は変更されることがあるので、保存したプレイスの ID を、後で同じプレイスに対して実行する詳細リクエストで返される ID と比較し、必要に応じてアップデートすることをお勧めします。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、id は廃止されました。
  • international_phone_number には、プレイスの電話番号が国際形式で含まれます。国際形式では、「+」記号と国コードが先頭に付きます。たとえば、Google のオーストラリア、シドニー オフィスの場合、international_phone_number+61 2 9374 4000 になります。
  • name:プレイスの名前。
  • utc_offset には、プレイスの現在のタイムゾーンに対する UTC からのオフセット値(分単位)が含まれます。たとえば、オーストラリアのシドニーにあるプレイスが夏時間の場合は 660(UTC から +11 時間)で、カリフォルニアにあるプレイスが夏時間以外の場合は -480(UTC から -8 時間)になります。
  • opening_hours には、次の情報が含まれます。
    • open_now は、プレイスが現在営業しているかどうかを示す Boolean 型の値です。
    • periods[] は、7 日間の営業日の配列で、日曜日を先頭として曜日が順に含まれます。各期間に含まれる情報は次のとおりです。
      • open には、プレイスがいつ営業を開始するのかを示す、曜日と時刻のオブジェクトのペアが含まれます。
        • day は、曜日に対応する 0〜6 の数字で、日曜日から始まります。たとえば、2 は火曜日を示します。
        • time には、時刻が 24 時間表示の hhmm 形式で含まれます(値の範囲は 0000〜2359)。time はプレイスのタイムゾーンで報告されます。
      • close には、プレイスが営業終了する曜日と時刻を表す 1 組のオブジェクトが含まれます。注: プレイスが年中無休の場合には、レスポンスに close セクションは含まれません。open 期間に値が 0 の day と、値が 0000 の time が含まれており、close が含まれていなければ、アプリケーションはこれを年中無休であると判断できます。
    • weekday_text は、1 週間の各曜日の書式設定された営業時間を表す 7 つの文字列の配列です。language パラメータがプレイス詳細リクエストで指定された場合、プレイス サービスはその言語に合うように営業時間を書式設定しローカライズします。この配列の要素の順番は、language パラメータによって異なります。1 週間が月曜日から始まる言語もあれば、日曜日から始まる言語もあります。
  • permanently_closed は、そのプレイスが恒久的に休業していることを示す Boolean 型のフラグです(値 true)。そのプレイスが恒久的に閉鎖されているのではない場合、このフラグはレスポンスに含まれません。
  • photos[]: PlacePhoto オブジェクトの配列です。PlacePhoto は、getUrl() メソッドによる写真の取得に使用できます。または、オブジェクトの次の値を検査できます。
    • height: 画像の最大高さ(ピクセル単位)。
    • width: 画像の最大幅(ピクセル単位)。
    • html_attributions:プレイス フォトとともに表示される属性テキスト。
  • place_id:プレイスを一意に識別するテキスト表記の ID です。プレイス詳細リクエストを介してプレイス情報の取得に使用できます。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。
  • rating:ユーザーのクチコミの集計に基づくプレイスの評価(0.0〜5.0)。
  • reference には、今後詳細サービスへのクエリで使用できるトークンが含まれます。このトークンは、詳細サービスへのリクエストで使用される reference とは異なる場合があります。保存したプレイスの reference は定期的にアップデートすることをお勧めします。このトークンはプレイスを一意に識別しますが、その逆は成り立ちません。プレイスには複数の有効な reference トークンがある場合があります。注: このページの廃止のお知らせに記載されている通り、place_id の導入により、reference は廃止されました。
  • reviews: 最大 5 件の口コミの配列。各クチコミは次の複数のコンポーネントで構成されます。
    • aspects[] には、PlaceAspectRating オブジェクトの配列が含まれます。オブジェクトごとに、施設の 1 つの属性の評価を提供します。配列内の最初のオブジェクトがメインの特徴とみなされます。各 PlaceAspectRating オブジェクトは、次のように定義されます。
      • type は、評価対象の特徴の名称です。サポートされるタイプは、appealatmospheredecorfacilitiesfoodoverallqualityservice です。
      • rating は、特定の特徴に対するユーザーの評価(0〜3)です。
    • author_name は、クチコミを投稿したユーザーの名前です。匿名のクチコミは「A Google user」に分類されます。言語パラメータが設定されている場合、「A Google user」はローカライズされた文字列を返します。
    • author_url は、ユーザーの Google+ プロフィールの URL(プロフィールがある場合)です。
    • language は、ユーザーのクチコミで使用される言語を指定する IETF 言語コードです。このフィールドにはメイン言語のタグのみが含まれ、国または地域を示す 2 次タグは含まれません。たとえば、英語のクチコミはすべてが「en」とタグ付けされ、「en-AU」や「en-UK」などのタグは含まれません。
    • rating は、このプレイスに対するユーザーの評価です。1〜5 の整数が含まれます。
    • text は、ユーザーのクチコミです。Google プレイスで場所のクチコミを投稿する場合、テキストのクチコミは省略可能であるため、このフィールドは空になることもあります。
  • types: このプレイスのタイプの配列です(例: ["political", "locality"] または ["restaurant", "lodging"])。
  • url:このプレイスの公式 Google ページの URL。これは、このプレイスについて入手可能な最良の情報を含む Google のページです。アプリケーションでこのプレイスに関する詳細結果をユーザーに表示する場合、その画面にこのページへのリンクを設置するか、このページを埋め込む必要があります。
  • vicinity:プレイスの簡単な住所です。番地や市町村などが含まれ、州、都道府県、郵便番号、国などは含まれません。たとえば、Google のオーストラリア、シドニー オフィスの場合、vicinity 値は 5/48 Pirrama Road, Pyrmont になります。vicinity プロパティが返されるのは、周辺検索の場合のみです。
  • website は、会社のホームページなど、このプレイスの公式ウェブサイトを示します。

すべての場所に多層的な評価が存在するとは限りません。クチコミ数が少なすぎる場合、詳細レスポンスには、従来の評価(0.0〜5.0)が含まれる場合(評価がある場合)と、評価が何も含まれない場合があります。

プレイス ID を使用したプレイスの参照

Google マップ上のプレイスは、そのプレイス ID を使用して一意に参照できます。プレイス ID は、お店やサービス、名所、公園、交差点など、大部分の場所に利用できます。プレイス ID は固定されているため、ID を一度確認すると、次にその場所を調べるときにもその値を再利用できます。

プレイス ID をアプリで使用するには、まず ID を取得します。ID は、プレイス検索または詳細リクエストの PlaceResult から取得します。その後、このプレイス ID を使用して プレイス詳細を取得できます。または、サインインしたマップでの属性の保存を有効化できます。

プレイス ID は、Google Maps API の利用規約、セクション 10.5.d のキャッシング制限の適用外です。そのため、プレイス ID は無期限で保存できます。

var map;

function initialize() {
  // Create a map centered in Pyrmont, Sydney (Australia).
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8666, lng: 151.1958},
    zoom: 15
  });

  // Search for Google's office in Australia.
  var request = {
    location: map.getCenter(),
    radius: '500',
    query: 'Google Sydney'
  };

  var service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: results[0].place_id,
        location: results[0].geometry.location
      }
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

プレイスフォト

プレイス フォト機能を使用して、質の高い写真コンテンツをアプリケーションに追加できます。フォトサービスを使えば、プレイスや Google+ ローカルのデータベースに保存されている数百万件というプレイス関連の写真を利用できます。プレイス詳細リクエストを使ってプレイス情報を検索すると、関連する写真コンテンツに対する写真のリファレンスが返されます。周辺検索リクエストやテキスト検索リクエストでも、関連する写真コンテンツがあれば、プレイスごとに 1 つの写真のリファレンスが返されます。フォトサービスでは、参照された写真にアクセスできるだけでなく、アプリケーションに最適なサイズに合わせて画像のサイズを変更できます。

PlacesService に対して行われる任意の getDetails()textSearch() または nearbySearch() リクエストに対する PlaceResult オブジェクトの一部として、PlacePhoto オブジェクトの配列が返されます。

注: 返される写真の数はリクエストによって異なります。

  • 周辺検索やテキスト検索では、PlacePhoto オブジェクトが 1 つのみ返されます。
  • レーダー検索リクエストでは写真情報は返されません。
  • プレイス詳細リクエストでは、最大 10 個の PlacePhoto オブジェクトが返されます。

関連画像の URL のリクエストは、PlacePhoto.getUrl() メソッドを呼び出して、有効な PhotoOptions オブジェクトを渡すことで実行できます。PhotoOptions オブジェクトでは、画像の必要な最大高さと最大幅を指定できます。max_heightmax_width の両方の値を指定した場合、フォトサービスによって 2 つのサイズのうち小さい方にサイズ変更され、元のアスペクト比は維持されます。

次のコード スニペットは、プレイス オブジェクトを受け入れ、写真が存在する場合にマップにマーカーを追加します。デフォルトのマーカー画像は、小さいバージョンの写真と置き換えられます。

function createPhotoMarker(place) {
  var photos = place.photos;
  if (!photos) {
    return;
  }

  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name,
    icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
  });
}

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。