Google Mapsを使うにあたってのメモ
チュートリアルに従ってhtnlを作成。とりあえず、css と js を別ファイルにして保存。
試してみると、ちゃんと表示できる。
ここまでは、webサーバいらずでJavaScriptが動けば（セキュリティ警告に承認すれば）
ファイルシステムだけでもいける。
maps.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:te="http://www.seasar.org/teeda/extension" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="./css/maps.css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./js/maps.js"></script> </head> <body> <div id="map_canvas"></div> </body></html>
maps.js
var map;
$(function(){
var latlng = new google.maps.LatLng(33.9, 134.2);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// マップが最初に起動したときのイベント
var boundslistener = google.maps.event.addListener(map, 'bounds_changed', function(){
var bounds = map.getBounds();
google.maps.event.removeListener(boundslistener);
});
});
maps.css
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
0 件のコメント:
コメントを投稿