{GoogleMapsAPI: 'JavaScript API V3', Title: 'hello map', Level: 2}
完成イメージ
ドキュメントを参考に弄ってく。
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
まんまサンプルのコピペw;
しかし基本部分は本当に少ないな^^;
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); }