Googleマップのマーカーをクリックしたらリンク先へ遷移させる

Googleマップのマーカーをクリックしたら、任意のページへ遷移させる方法です。
複数のマーカーにも対応しています。

map-2

デモページ

基本設定

必要なファイルを読み込む

Google Maps API のスクリプトを読み込みます。
v3からAPIキーが不要になっているので、以下のコードをそのまま貼り付けて使えます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">

html

地図を表示したいエリアに任意のid名を付けます。

<div id="map"></div>

css

地図の縦幅、横幅を設定しないと表示されないので、必ず設定します。

#map {
 width: 100%;
 height: 300px;
}

JavaScript

緯度経度を調べるにはこちらのサイト様が便利です。

function map_canvas() {
//マーカーの情報
	var data = new Array();
		data.push({
			lat: '35.681382', //緯度
			lng: '139.7660843', //経度
			url: 'http://www.jreast.co.jp/estation/stations/1039.html' //リンク先
		});
		data.push({
			lat: '35.678187',
			lng: '139.76817',
			url: 'http://www.yaesu-book.co.jp/'
	});
		data.push({
			lat: '35.682063',
			lng: '139.773448',
			url: 'http://www.nihonbashi-tokyo.jp/'
	});

//初期位置に、上記配列の一番初めの緯度経度を格納
	var latlng = new google.maps.LatLng(data[0].lat, data[0].lng);

	var opts = {
		zoom: 15,//地図の縮尺
		center: latlng, //初期位置の変数
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};

//地図を表示させるエリアのidを指定
	var map = new google.maps.Map(document.getElementById("map"), opts);

//マーカーを配置するループ
	for (i = 0; i < data.length; i++) {
		var markers = new google.maps.Marker({
			position: new google.maps.LatLng(data[i].lat, data[i].lng),
			map: map
		});
		//クリックしたら指定したurlに遷移するイベント
		google.maps.event.addListener(markers, 'click', (function(url){
			return function(){ location.href = url; };
		})(data[i].url));
	}
}

//地図描画を実行
google.maps.event.addDomListener(window, 'load', map_canvas);