2010/08/31

[Google Map V3]地図を表示する

どうやらいつの間にか、GoogleMapのバージョンがあがってしまったみたいです。

というわけで、さっそく、簡単な地図を表示してみたいと思います。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="initial-scale=1.0, user-scalable=no"
/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<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_00")
, myOptions
);
}

</script>
</head>
<body onload="initialize();">
<div id="map_canvas_00" style="width:400px; height:500px;">
</div>
</body>
</html>

Google Maps JavaScript API V3のThe "Hello, World" of Google Mapsで紹介されているプログラムを少し変更しました。

V2と比べてメソッドなどが変更されている模様です。

実行結果はこのようになります。


google.maps.Mapクラスをコールすることで地図を表示できるみたいだが、詳しい引数については別途調査する必要があり。

0 コメント:

コメントを投稿