googlemapに任意のポイントをつけて、リンクをはる。

googlemap上に、任意のポイントをつけて、リンクを貼り付ける。クリックするとそのリンクに移動する。

事前にグーグルのmapapiを読み込んで置く必要がある。

// headタグ内で読み込む
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">>

<div id="map"></div>
<script type="text/javascript">
	$(function(){
		function map_canvas() {
		//マーカーの情報
		  var data = new Array();
		    data.push({
		      lat: '35.7192551', //緯度,
		      lng: '139.7401258', //経度
		      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);
		
	})
</script>