インターネット上で地図を利用するツール「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対応
iPhoneやAndroidで高速に地図を表示可能な機能が追加。
【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>
地図を初期化するために、まず地図の初期化変数を持つ Map options オブジェクトを作成します。このオブジェクトは構築するのではなく、オブジェクト リテラルとして作成されます。地図は、特定の地点を中心にしたものにしたいので、この位置を示す latlng 値も作成し、これを地図のオプションの中に組み込みます。位置情報の指定については、後述の緯度と経度を参照してください。
また、初期のズーム レベルと mapTypeId を google.maps.MapTypeId.ROADMAP に設定します。次のタイプがサポートされます。
ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。
SATELLITE は写真タイルを表示します。
HYBRID は、写真タイルと主要な機能（道路、地名）のタイル レイヤを組み合わせて表示します。
TERRAIN は、物理的な起伏を示すタイルで、高度や水系（山、河川など）を表示します。
Google Maps API V2 とは異なり、デフォルトのマップ タイプはありません。対応するタイルを表示するには、特定のマップ タイプを初期マップ タイプとして設定する必要があります。
● var latlng = new google.maps.LatLng(-34.397, 150.644); ←座標指定
● var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);←DOMの要素名
【4】地図を読み込む
<body onload=”initialize()”>
HTML ページをレンダリングすると同時に、ドキュメント オブジェクト モデル（DOM）を作成し、外部のすべての画像とスクリプトを取得して、document オブジェクトに組み込みます。ページの読み込みが完了した後に、自分の地図をそのページだけに配置されるようにするには、HTML ページの <body> 要素が onload イベントを受信したときにのみ Map オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングをより正確にコントロールできます。
とこれだけです