<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng( ここに座標 );
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(document.getElementById("gmap"), myOptions);
/* マーカー表示 */
var marker = new google.maps.Marker({
position: latlng,
map: gmap,
title:"<$MTEntryTitle$>"
});
/* バルーン表示 */
google.maps.event.addListener(marker, 'click', function() {
new google.maps.InfoWindow({
content: "<strong><$MTEntryTitle$></strong><p>"
}).open(gmap,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="gmap" style="width:500px; height:500px"></div>
</body>
</html>
- このアプリケーションは、
<!DOCTYPE html>宣言を使用して HTML5 として宣言されています。 scriptタグを使用して Maps API JavaScript を読み込みます。- 「gmap」という名前の
div要素を作成して、地図を保管します。 - 「gmap」オブジェクトを作成する JavaScript 関数を記述します。
- gmap オブジェクトを
bodyタブのonload·イベントから初期化します。
