今さら今からGoogle Maps JavaScript API v3 -まずは表示-

Google Maps JavaScript API v2で作ったシステム(ってほどのものでもないけど)を別案件でスライドさせて使おうと考えていました。
しかし、既にv2を動かすのに必要なAPIキーの発行が出来なくなっているので、v3にて再度作らないといけなくなりました。
なので今さらながらGoogle Maps JavaScript API v3を勉強です。
既にコンテンツ自体は出来あがってしまっていますが、メモも兼ねて数回に分けてエントリーしたいと思います。

参考リンク
Google Maps JavaScript API v3
Google Maps JavaScript API v3|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room
まずはブラウザの全画面にてgooglemapsを表示させてみたいと思います。

HTML部

<html>
<head>
<title>googlemapsを表示</title>

<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script type='text/javascript'>
<!--javascriptは後述-->
</script>

<style type="text/css">
<!--
html, body {
	margin:0px;
	padding:0px;
	height: 100%;
}
#map_canvas {
	height: 100%;
}
-->
</style>
</head>

<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

ハイライトの5,6行目でv3用のjsライブラリ読み込みとスマートフォン(iPhone)用に画面のスクロールと拡大をオフにしてgooglemapの操作をしやすいようにします。
?sensor=trueはGPS機能の有無です。後にスマートフォンのGPS機能との連動を試してみたいのでtrueにしておきます。
全画面に地図が表示されるようにbodyとマップを表示するスペースである#map_canvasのheightをスタイルシートで100%にします。
body onloadにて後述するjavascriptの初期化関数を実行します。

javascript部

/* ページ読み込み時に地図を初期化 */
function initialize() {
	// 緯度・経度
	var latlng=new google.maps.LatLng(35.624488022631056,139.741845121254);
	// オプション設定
	var myOptions = {
	zoom: 18, //初期のズーム レベル
	center: latlng, // 地図の中心地点
	mapTypeId: google.maps.MapTypeId.ROADMAP // 地図タイプ
	};
	// 地図オブジェクト生成
	var map=new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

とりあえず最低限のオプション(緯度経度、ズームレベル、地図タイプ)を設定しています。
参考(地図オプション

こんな感じ


googlemapsを表示