何と無く使っていたGoogle Maps API V3ですが、もう少しきちんと理解するため調べてみました。V2からの変更点としては、API Keyが不要になったり、読み込み速度の向上(特にiPhoneやAndroidなどのモバイル端末)が主なところのようです。
--- head内に設定等を記述 ---
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);//緯度, 経度
var myOptions = {
zoom: 8, //ズームは0~18までで設定(数値大でより詳細に)
center: latlng, //地図の中心となる緯度, 経度
mapTypeId: google.maps.MapTypeId.ROADMAP //地図タイプ※下記表を参照
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<meta>タグはiPhoneなどの端末でフルスクリーン表示させるために必要だそうです。ライブラリ読み込み<script>タグ内にあるsensorパラメータは、位置情報取得機能のあるデバイスに対しユーザーの位置を取得する必要があるか否かを宣言するもので、true或いはfalseを必ず指定せんといけんとのこと。これ以降はマップの設定です。地図タイプの詳細は以下の通り。
mapTypeIdの種類 | 説明 |
---|---|
ROADMAP | 通常の地図を表示します |
SATELLITE | 航空写真を表示します |
HYBRID | 航空写真上に主な道路名や名称などを表示します |
TERRAIN | 地形や大地の特徴を色分けした地図を表示します |
--- body内に記述 ---
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:400px"></div>
</body>
<body>タグでのonloadの実行で、ページが読み込まれたあとにマップオブジェクトを読み込ませます。一部ブラウザでの表示不具合対策だそうです。<div>~</div>の箇所にマップを表示。サイズの指定は必須。