GooglemapAPI スタイル複数マーカークリック時アクション

個人的なメモです。

  function map_canvas() {
    //マーカーの情報
    var data = new Array();
      data.push({
        lat: '35.705067',
        lng: '139.761887',
        url: 'https://goo.gl/maps/oSsTNEUa3e82'
    });
      data.push({
        lat: '35.674936',
        lng: '139.770776',
        url: 'https://goo.gl/maps/4jX7V3WqCeH2'
    });
    
    // 初期設定
    var latlng = new google.maps.LatLng(35.690900, 139.760775);
    var opts = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
      };
    var map = new google.maps.Map(document.getElementById("map"), opts);

    // マーカー出力
    for (i = 0; i < data.length; i++) {
      console.log( i );
      var markers = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].lat, data[i].lng),
        icon: 'http://www.web-jjs.jp/_images/_common/googlemap-maker-'+i+'.png',
        map: map
      });
      google.maps.event.addListener(markers, 'click', (function(url){
        return function(){ window.open(url); };
      })(data[i].url));
    }
    
    // スタイル設定
    var
    styleOptions = [{
      featureType: 'all',
      elementType: 'all',
      stylers: [{ saturation: -100 }]
    }],
    styledMapOptions = {
      map: map,
      name: 'mono'
    },
    styledMapType = new google.maps.StyledMapType( styleOptions, styledMapOptions );
    map.mapTypes.set( 'mono', styledMapType );
    map.setMapTypeId( 'mono' );
  }

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

関連記事