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

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

map-2

デモページ

基本設定

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

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

※2018年からAPIキーが必須になりました。
Google Cloud Platform でAPIキーを取得してください。

<script type='text/javascript' src='//maps.google.com/maps/api/js?key=APIキー'></script>

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);

RELATED POSTS