google maps api v3でリンクを押したらInfoWindowを表示させる

今更ながらgoogle mpas apiのお話です。
@motokixとaタグのリンクをクリックしたらinfoWindowを表示するにはどうやるかって話になったんで書いてみました。

jsonで緯度、経度、url、タイトルを持たせてそれをinfoWindowで表示するって感じです。
ちなみにmapのサイズはブラウザのwindowサイズにあわせて変更するようになってます。

javascript書くのは楽しいですね。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<script type="text/javascript">
var mapInfos = [
	{
		text: "エクスクウェイド",
		link: "http://www.exquad.co.jp/",
		lat: 35.732404,
		lng: 139.719921
	},
	{
		text: "練馬駅",
		link: "",
		lat: 35.737800,
		lng: 139.654035
	},
	{
		text: "椎名町",
		link: "",
		lat: 35.726661,
		lng: 139.694687
	},
	{
		text: "北池袋",
		link: "",
		lat: 35.7404,
		lng: 139.7165
	}
];

var mapOptions = {
	zoom: 15,
	center: new google.maps.LatLng(35.7307,139.7133),
	mapTypeId: google.maps.MapTypeId.ROADMAP
};        



$(function(){
	var markers = [];
	var map;
	var infoWindow;

	var createMarker = function( mapInfo ) { // mapを生成する
		var marker = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(mapInfo.lat, mapInfo.lng),
			title:mapInfo.text
		});
		// イベント登録
		google.maps.event.addListener(marker,'click',function(){
			showInfoWindow(mapInfo,marker);
		});
		markers.push(marker);
	};

	var showInfoWindow = function(mapInfo,marker) { // info windowの表示
		var content = '<div style="overflow:auto;width:100%;height:100%;text-align:center;">' + mapInfo.text +'</div>';
		if ( mapInfo.link ) {
			content += "<div><a href='"+ mapInfo.link + "'>リンク</a></div>";
		}
		if ( infoWindow ) {
			infoWindow.close();
		}
		infoWindow = new google.maps.InfoWindow({
			content: content,
			maxWidth: 1000
		});

//		map.setCenter(marker.getPosition()); // マップの中心位置にする
		infoWindow.open(map,marker);
	};

	var map = new google.maps.Map($("#map")[0], mapOptions);
	$.each(mapInfos, function(index,json){
		createMarker(json); // マーカーの生成
		$('#menu').append('<a href="#" class="open" id="_'+ index + '">' + json.text + '</a>、' );
	});


	$('.open').click(function(){ // クリックした際にinfoWindowを表示する
		var index = this.id.replace('_','');
		showInfoWindow(mapInfos[index],markers[index]);
	});

	// windowをリサイズする
	var windowResize = function() {
		$('#map').css({
			width:$(window).width(),
			height:$(window).height() - 100
		});
	}

	windowResize();
	$(window).resize(windowResize);

});

</script>
</head>
<body>
<div id="map" style="width:100%; height:1000px"></div>
<div id="menu"></div>
</body>
</html>

こんな感じで動いてます。