{GoogleMapsAPI: 'JavaScript API V3', Title: 'hello map', Level: 2}

google Maps JavaScript

完成イメージ

　ドキュメントを参考に弄ってく。

top.html

　整形しヅライので、javascriptは分離。
そのうち使いたいので、jQuery関連もロードするように設定。

<html>
    <head>
        <title>Hello world in Google Maps API version3</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=false"></script>
        <script src="http://www.google.com/jsapi"></script>
        <script>
            google.load("jquery", "1.5.0");
            google.load("jqueryui", "1.8.9");
        </script>
        <script type="text/javascript" src="hello_maps.js" charset=UTF-8></script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%;height:100%"></div>
    </body>
</html>

hello_maps.js

　まんまサンプルのコピペｗ；
しかし基本部分は本当に少ないな＾＾；

function initialize() {
    var centerPos = new google.maps.LatLng(35.658613, 139.745525);
    var mapOptions = {
        zoom : 18,
        center : centerPos,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}