[GoogleMaps] 기호를 삽입하여 각각 외부 링크를 가집니다.


하고 싶은 일은 두 가지다.
(1) Google Map의 지정된 위치에 태그를 설정합니다.
(2) 세로로 된 표지에 임의의 링크를 각각 붙인다.
또한 Google Map을 사용할 때 API의 연결, 읽기, 중심 좌표 및 초점을 별도로 지정해야 하지만 이 기사에서는 적용되지 않습니다.

실제 코드


//マーカーを立てたい座標を配列でまとめておく
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
https://developers.google.com/maps/documentation/javascript/reference/map

좋은 웹페이지 즐겨찾기