Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 168

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php on line 175

Warning: Cannot modify header information - headers already sent by (output started at /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/social-networks-auto-poster-facebook-twitter-g/inc/nxs_functions_engine.php:168) in /home/cwor/www/corporate/managesite/soho_wp/wp-content/plugins/stripe/includes/core/libraries/wp-session/class-wp-session.php on line 146
Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#1] – APIキー の取得 | 私たちCamarade(カマラード)はクリエイター目線で総合的な情報を発信するWebメディアとして情報をお届けしております。
やまさきやまさき
2017/07/24

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#1] – APIキー の取得

この記事は約3分で読めます。

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#1] – APIキー の取得

初級カスタマイズ

今回は、Google Map APIを使用してGoogle Mapをカスタマイズする方法をご紹介していきたいと思います。

iframeの埋め込みだけではGoogle Mapのカスタマイズは難しいですが、Google Map APIというものを使用すれば、簡単にGoggle Mapがカスタマイズできるようになります。

javascriptをちょろっと書いてあげるだけで、オリジナルのマップアイコンの使用や、色合い・情報量を変更する、などの自由度の高いカスタマイズが可能になるので、ぜひ活用してみてください。

少し情報量が多くなってしますので、何本かの記事に分けて書こうと思いますが、まず初回は、Google Map APIを使用するために必要な「APIの読み込み」と「APIキー」を取得する方法を紹介していこうと思います!

Google Map APIを読み込む

スクリプトタグを記述するだけで大丈夫です。head内もしくはbody直前など、各サイトの環境にあった場所で読み込んでください。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>

この時、上記の「YOUR_API_KEY」の部分にAPIキーを記述する必要がありますので、APIキーを取得していきましょう。

 

APIキーを取得する

まずはこちらにアクセスしてください。

少しスクロールすると、下のように「キーを取得する」というボタンが出てくるかと思います。

このボタンクリックすると、以下のような画面が表示されると思います。

この画面が表示されたら、「select or create project」からプロジェクトを選択もしくは作成してください。名前とかは適当で大丈夫です。

プロジェクトを選択したら、「ENABLE API」をクリックしてキーを取得します。以下の画面が表示されればOKです。

「YOUR API KEY」というメッセージの下に表示されているのがあなたのAPIキーになります。(上の画像では半分ほど隠しています)

このキーをコピーして、先ほどのAPI読み込みスクリプトの該当部分にペーストしたら完了です!

あとは好きにカスタマイズしていくだけ

ここまでで、オリジナルのGoogle Mapを使用する準備が整いました。

次回からは実際にGoogle Mapをカスタマイズしていこうかと思います!

Google Map APIを使用してGoogle Mapをカスタマイズしてみよう [#1] – APIキー の取得
やまさき フロントエンジニア

新人縄跳び野郎です!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。