スキップしてメイン コンテンツに移動

郵便番号検索と Google Maps Embed API


郵便番号検索で Google Maps Embed API を使ってみました。

Google Maps Embed API を使うと
簡単にサイトに地図を埋め込むことができます。
利用も無料です。

以下にその手順を記載しておきます。


(1)キーを取得する。
https://console.developers.google.com/flows/enableapi?apiid=maps_embed_backend&keyType=CLIENT_SIDE&reusekey=true
にアクセスしてキーを取得します。
すでに App Engine 等のプロジェクトを持っている場合は
そのプロジェクトを選ぶだけです。


(2)クイックスタートでリンクを作成する。
https://developers.google.com/maps/documentation/embed/start
を開いて場所名や住所を入力して、Looks good! ボタンを押します。

Enter your API key に先ほど取得したキーを入力して Done を押します。

すると画面の下の方に埋め込み用のHTMLが表示されます。
これを自身のサイトの好きな場所に埋め込むだけです。

プログラムで動的に場所を変更したい場合は HTML 中のリンクパラメータ「q」を検索ワードや検索したい住所にします(URLエンコードはしましょう)。

例として 郵便番号検索 では画像のように地図を埋め込んでいます。パラメータqに名称と住所を半角スペース(%20)で区切って渡しているだけです。画像のページは 日本郵便 株式会社 関東支社 です。具体的な HTML を見たい方はソースを「iframe」等で検索するととても簡単に埋め込めることが分かるかと思います。



ルート案内(ナビ)や拡大地図(ブラウザでの大きな地図・スマホならアプリ起動)へのリンクも表示され、とても便利になったものです。