久しぶりの簡単Google Mapプログラミング

JavaScript Google Map

久しぶりにGoogle Mapを使うことになりそうなので、復習。
久しぶりというのも酷くて、前回使用したのは、もう8年前だろうか。もはや覚えていない。

試したのは下記４つ。

１．地図を表示する
２．特定地点にマーカーを表示する
３．表示したマーカーにマウスをのせるとメッセージを表示
４．マウスを取るとメッセージが消える

<html>
<head>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
	type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
	var map;
	// 初期化。
	function init() {
		// Google Mapで利用する初期設定用の変数
		var latlng = new google.maps.LatLng(39, 138);
		var opts = {
			zoom : 6,
			mapTypeId : google.maps.MapTypeId.ROADMAP, //通常の地図
			center : latlng                            //地図の場所
		};
		// １．Mapを作成
		map = new google.maps.Map(document.getElementById("map"), opts);

		// Markerの初期設定
		var markerOpts = null;
		var marker	   = null;
		var latitude   = 35.668175;
		var longitude  = 139.699032;
		var markerPosition = new google.maps.LatLng(latitude, longitude);
		markerOpts = {
				position : markerPosition,
				map : map,
				title : "marker"
			};
		// ２．直前で作成したMarkerOptionsを利用してMarkerを作成
		marker = new google.maps.Marker(markerOpts);

		//吹き出しを作成
        var contentString = 'Shibuya js!';
        var infowindow = new google.maps.InfoWindow({
            content: contentString  //吹き出し内コメント
        });

      	//３．マウスをかざしたときに吹き出しがオープンするイベントを定義
        google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.open(map,marker);
        });
        //４．マウスを取り除いたときに吹き出しがクローズするイベントを定義
        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close(map,marker);
        });
	}
</script>
</head>

<body onload="init()">
	<div id="map"></div>
</body>

</html>

動かすとこんなかんじになる。