このページの本文へ

前へ 1 2 次へ

新APIの基本の使い方を解説

手軽になった!Google Maps API V3

2009年06月03日 14時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
  • 本文印刷

 Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。

 このGoogle Maps APIの新バージョン「Version 3」(以下V3と略)が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。


Google Maps API V3の主な変更点

 Google Maps API V3では、以下の点が新しくなりました。

(1)API Keyが不要
V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。
(2)iPhone/Androidへの対応
iPhoneやAndroidで地図を高速に表示できるように機能が追加されました。
(3)JavaScriptの書き方の変更
V2とV3では、地図を表示するためのJavaScriptの書き方がかなり変わっています。

 Webサイト制作者やサイト運営者にとってうれしいのは、(1)のAPI Keyが不要になった点でしょう。これまでURLごとにAPI Keyの発行を申請する必要がありましたが、それが不要になったことでより手軽にGoogle Maps APIを使えるようになりました。


基本的な地図を表示してみる

 V3を使って基本的な地図を表示する手順を紹介しましょう。


●V3の組み込み

 HTMLのヘッダー部分に以下の行を追加し、Google Maps API V3のライブラリを組み込みます。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=trueまたはfalse">


 最後の sensor= の部分には、位置検知センサー(GPSなど)がある機器では true、それ以外では falseを指定します。iPhone用の地図を表示するなら、sensor=true とすれば良いでしょう。一方、一般的なパソコン用の地図なら、sensor=false とします。


●div要素の追加

 次に、ページのHTMLの中に、地図を表示するための div要素を追加します。div要素にはID属性を設定し、スタイルシートのwidthとheightで地図のサイズを指定します。

 たとえば、ID属性を「map_canvas」にし、800×600ピクセルの地図を表示するなら以下のように書きます。


<div id="map_canvas" style="width : 800px; height : 600px;"></div>


前へ 1 2 次へ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング