📜

【GoogleMaps】マーカーを刺して、それぞれに外部リンクを持たせる

2020/09/18に公開

JavaScript

Google Maps

tech

やりたかったことは2つ。

（１）Google Map上の指定位置にマーカーを立てる。
（２）立てたマーカーそれぞれに任意のリンクを貼る。

なお、Google Mapの利用には、APIの繋ぎこみや、読み込むGoogleMapの中心座標やズームの具合を決めておく作業が別途必要ですが、それは本記事では扱いません。

実際のコード

//マーカーを立てたい座標を配列でまとめておく
const MarkersLatLng = [
    35.xxxxxx, 139.xxxxxx,
    35.xxxxxx, 139.xxxxxx,
    35.xxxxxx, 139.xxxxxx
];

//外部リンクを配列でまとめておく
const ExternalLink = [
  'https://xxx.jp', 
  'https://yyy.jp', 
  'https://zzz.jp'
];
  
//マーカーの設定全体の関数
function SetMarker() {
    const idx = parseInt(MarkersLatLng.length);
    const img = 'path/marker.png';//マーカーに使用したい画像のpath
    let icon;

    //マーカーのサイズなどのデザイン周りの設定
    icon = new google.maps.MarkerImage(
      img, //画像のURL
      new google.maps.Size(43, 44), //画像のサイズ
      new google.maps.Point(0, 0), //画像のposition
      new google.maps.Point(16, 42), //画像のアンカーの位置
      new google.maps.Size(43, 44) //画像のサイズ
    );

    let i = 0;
    while (i < idx) {
      console.log(i);
      //座標を設定
      var pos = new google.maps.LatLng(
        MarkersLatLng[i][0],
        MarkersLatLng[i][1]
      );
      // マーカーのインスタンスを作成する
      MarkerArray[i] = new google.maps.Marker({
        map: map,
        position: pos,
        icon: icon_path,
        zIndex: 15,
        cursor: 'pointer',
        animation: google.maps.Animation.DROP,
        lavel: i
      });
      MarkerEvent(i);
      i += 1;
    }

    //アイコンをクリックしたら指定のURLへと遷移させる関数
    function MarkerEvent(i) {
      MarkerArray[i].addListener('click', function() {
        window.open().location.href =
          ExternalLink[MarkerArray[i].lavel];
      });
    }
  }

//関数の実行
$(document).ready(function(){
    SetMarker();
});

参考

Maps JavaScript API

実際のコード

参考

Discussion