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

Google Maps API 検索ボックスを表示する

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

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

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回 マーカー操作あれこれ)

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です