ライセススタッフが書くブログ。

Google Mapの英語版の埋め込みの忘備録!

| Web制作のこと

おはようございます!団長です!

 

自分の担当したお仕事で初めて「英語表記」のGoogle Mapの埋め込みをする事になりまして、当初自分が考えていたより手間が掛かってしまったので忘備録も兼ねて記事にしたいと思います。

今回自分が使用したのはGoogle Maps Embed APIです。

 

 

API KEYの取得

まず英語版のGoogle Mapを動作させるために必要な「API KEY」を「Google Developers Console」より取得します、なおGoogleアカウントが必要になるのでお持ちでない場合は先にGoogle アカウントを作成しましょう。

Google Developers Consoleにログインしたら、プロジェクトを作成を押してプロジェクト名を任意の名前で入れます。

150811-01

150811-02

 

プロジェクトを作成したら次に使用するAPIを選択します。

今回の例では「Google Maps Embed API」を選びます。

150811-03

 

Google Maps Embed APIを選択すると「APIを有効にする」ボタンが出てくるので、押して有効にして下さい。

150811-04

 

次に認証情報から「新しいキーを作成」を選択します。

150811-05

 

ブラウザキーを選択します。

150811-06

 

 

設置するホームページのURLを入れて、作成を押します。

(のちに変更する事も可能です)

150811-07

 

 

これでAPI KEYが発行されました!乙!

150811-08

 

 

 

 

Google MAPを埋め込む

↑で発行されたAPI KEYを使用してGoogle MAPをHTMLファイルに埋め込んでみましょう。

余談で、自分も今回勉強になったのですが、Google MAPを表示させる地図の種類って複数あるのですね。

今回は最もスタンダードだと思われる(恐らく)「Place」という表示方法で進めたいと思います。

上記ソースで「取得したAPIKEY」と「UTFエンコードした場所」をそれぞれ置き換えていくだけです。

まず「取得したAPIKEY」は先ほどしたばかりなので問題ないと思います。

僕の例だと「AIzaSyBH1-hO1zskn-i7xQ2BdwkZk0gk_clkaSg」ですね(←これ入れても動かないっすよ!)

 

そして「UTFエンコードした場所」って何かと言うと、自分でもなんて書いたら良いか迷ってしまったのでこういう書き方をしましたが。

例えば「新宿駅」を表示したいなら「新宿駅」をUTFでエンコードして下さいな。という事です。分かりづらくてすみません。

下記サイトで変換するとグッドです。

Web便利ツール/URLエンコード・デコードフォーム – TAG index Webサイト

150811-09

↓でUTFエンコードしたテキストを「UTFエンコードした場所」に置き換える感じです。

 

150811-10

 

上記をふまえて完成したサンプルコードが下記になります。

で実際に表示してみた例。

 

 

書いてて気付いたのですが、英語版じゃないですよね・・・

パラメーター設定忘れてました!!

「UTFエンコードした場所」の後ろへ

を追加すると英語版のGoogle Mapが表示されます。

 

どうでしょう?上手く表示できたでしょうか??

自分がつまずいたポイントはAPI KEYが有効になる(反映されるまで)に少し時間が掛かった所ですね。

完璧なはずなのにエラーが出て表示されないーーーと悩まされました。

その時は、少し時間置いてからトライしようとして気がついたらいつの間にか表示されていました。

 

 

うーむ、説明下手なんですよねー。

いっぱい記事書いてなれていきたいと思う今日このごろです。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る