Google Maps API の使い方（第2回 検索ボックスの表示）

Google Maps API を使用したマップ画面に、検索窓を表示してみる。
（V3対応）

• Google Maps API の使い方（第1回 APIキーの取得）
• Google Maps API の使い方（第2回 検索ボックスの表示）
• Google Maps API の使い方（第3回 マーカー操作あれこれ）

検索窓の使用に必要なライブラリ

Google Maps JavaScript APIを利用していて検索窓を使うには、Google Places API Web Serviceも必要になる。

サンプルソース

Googleのページで公開されているサンプルソースを流用すれば、簡単に設置できる。

Place search box | Google Maps Javascript API | Google Developers
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=ja

ポイントとしては、以下の通り。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

jsファイルの引数にlibraries=placesを指定することで、Google Places API を有効化することができる。

→ Google Maps API の使い方（第3回 マーカー操作あれこれ）