<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>
<!-- 【１】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">
// ■地図初期化し表示
function initialize() {
// ■地図を表示する緯度経度を指定する
var latlng = new google.maps.LatLng(36.25827223578943,139.40834999084473);
// ■地図必須プロパティを設定
var myOptions = {
// ■ズームレベルの指定 0〜17
zoom: 14,
// ■地図の中心を指定（上記で設定の緯度経度latlng）
center: latlng,
// ■地図のタイプ設定
// ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
mapTypeId: google.maps.MapTypeId.ROADMAP
};// 地図プロパティここまで
// ■<div id="map_canvas">と結びつけて、その領域に地図を描く
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// ■中心にマーカーの表示
var marker1 = new google.maps.Marker({
position: latlng,
title:"東武小泉線 西小泉駅"
});
marker1.setMap(map);
// ■マーカーの追加表示（緯度経度指定の場合）
var myLatlng = new google.maps.LatLng(36.256078020047106,139.40699011087418);
var marker2 = new google.maps.Marker({
position: myLatlng,
title:"いずみ緑道"
});
marker2.setMap(map);
// ■マーカーをクリックしたら、情報ウィンドウを表示
var marker1text = 'ここは<span style="color:#f00;">東武小泉線 西小泉駅</span>です'
var infowindow1 = new google.maps.InfoWindow({
content: marker1text,
maxWidth:200
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
var marker2text = 'ここで毎月１回<span style="color:#f00;">グルメ横丁</span>が開催されます'
var infowindow2 = new google.maps.InfoWindow({
content: marker2text,
maxWidth:200
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
}//initialize()
</script>
</head>
<body onload="initialize()">
<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>
