このページの本文へ

前へ 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 次へ

ソーシャルランキング
  1. Google社員がSEOの質問に答える AMA with Google Search SMX West 2017 15
  2. クラウドは地方を救うか?KDDIウェブら「Cloud ON OKINAWA」を立ち上げ 4
  3. GoogleやLINEみたいなSMS二要素認証をTwilioでサクッと実装してみよう 2
  4. 「使いやすい」と言われたい!WordPressの編集画面にメタボックスを追加する方法 2
  5. 【週末まとめ読み】レスポンシブをメディアクエリなしで実現する5つのCSSトリック 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング