ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

Google Maps API V3の導入と変更点


インターネット上で地図を利用するツール「Googleマップ」ですが。独自の地図を簡単に作れる「Google Maps API」ですが、Google Maps V2 API アプリケーションのAPI Keyの発行ができなくなっていました。

Google Maps V3 API アプリケーションはAPI Keyの取得が必要なくなっていて、導入がさらに簡単になっています。


Google Maps API Version 3は2009年5月17日にリリースされていて、Google Maps JavaScript API バージョン 2 は、2010 年 5 月 19 日に正式にサポートが終了ています。


Google Maps API V3の変更点

【1】API Keyが不要
V2まではGoogle Maps APIを使うためにはAPI Key取得が必要ですが、V3では不要になりsensorパラメータ指定が必要になっている

【2】iPhone/Android対応
iPhoneAndroidで高速に地図を表示可能な機能が追加。

【3】JavaScript記述方法が変更
V3では、地図表示のJavaScript記述方法がかなり変更に

Google Maps V3 APIの導入方法(一部GoogleMasp導入ページより引用)


【0】アプリケーションを HTML5 として宣言する

ウェブ アプリケーション内で、実際の DOCTYPE 宣言が推奨されている。ただし、対応していないブラウザも存在するため、今回はxhtml1.0 Transitionalで記述します。


【1】ヘッダスクリプト、metaタグ

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
HTML5(スマホサイト)の場合

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">


【2】地図 DOM 要素

<div id="map_canvas" style="width: 100%; height: 100%"></div>

地図をウェブページに表示するには、そのための領域を用意する必要があります。これには、ブラウザのドキュメント オブジェクト モデル(DOM)内で名前付きの div 要素を作成し、この要素への参照を取得するのが一般的です。

上の例では「map_canvas」という名前の <div> を定義し、style 属性でそのサイズを設定しています。この値は携帯端末で適切なサイズに拡張されるよう「100%」に設定されています。これらの値はブラウザの画面サイズに合わせて調整の必要があるかもしれません。地図は常にそのサイズを、地図を収容する要素のサイズから取るので、<div> のサイズは常に明示的に設定する必要があります。


【3】地図のオプション

<script type="text/javascript">

function initialize() {

var latlng = new google.maps.LatLng(-34.397, 150.644);

var myOptions = {
zoom: 8,
center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP

};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

</script>


地図を初期化するために、

続きは ⇒ WEB制作 WEB制作システム