やまさきやまさき
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やフリーランスのパートナーを募集しております。