Tech Sketch Bucket of Technical Chips by TIS Inc.

Google Maps API で地図を表示する

Pocket

この記事はeXcale Developer's Blogから移転されたものです。

eXcale開発チームの松尾です。

今回は Google Maps API を用いて地図を表示する方法についてお話ししたいと思います。

皆さんもご存知かと思いますが、Google Maps とは Google によって提供される地図アプリケーションのことです。
Google Maps は API が公開されており、ユーザーが自由にアクセスできるウェブサイトなら無料で利用することが可能です。(※1)
(※1)2013年11月21日現在。利用規約の詳細については公式の Google Developers をご覧ください。

JavaScript 用の API を利用して地図を表示する

Google Maps には複数の API がありますが、今回は JavaScript 用の API である Google Maps JavaScript API v3 を利用して地図を表示します。
任意のファイル名でHTMLファイルを作成し、以下のように JavaScript でコードを書くと、それだけで地図を表示することができます。

作成したHTMLファイルをブラウザで開きます。
東京駅の地図が表示されたでしょうか。

ここで注目していただきたいのは、mapOptions のプロパティです。
center は地図の中心となる緯度と経度、zoom は地図の拡大率、mapTypeId は地図の見栄えを決定しています。

例えば、上記のコード内の mapOptions を以下のように変更すると、先ほどの地図が航空写真として表示されます。

ジオコーディングを利用して緯度・経度を取得する

緯度・経度を調べて入力するのも良いですが、できれば有名な建物の名前で周辺地図を表示させられるといいですね。

そういうときは Google Maps API のジオコーディングを利用します。
上記コードのスクリプトの部分を以下のように書き換えます。

東京タワーの地図が表示されたでしょうか。
今回使用したジオコーディングとは、住所や建物の名前から緯度・経度を取得するものです。
results 内には address 内の文字列(今回の例では、"Tokyo Tower")から得られた緯度・経度が保存されます。
その緯度・経度を center の値に設定することで、東京タワーの位置を地図の中心としています。

最後に

より詳しい情報が必要な方は、公式の Google Developers をご覧ください。
サンプルもたくさんあります。

また、今回は簡単な説明を行うため、APIキーを用いませんでしたが、Google からは APIキーの利用が推奨されています。
APIキーの取得および設定についてはこちらをご覧下さい

エンジニア採用中!私たちと一緒に働いてみませんか?