Google Map 埋め込んだ地図にピン(マーカー)を打ちまくりたい。ついでに色々カスタマイズしてみた。

会社やお店のアクセスページとかでGoogle Mapを埋め込んだりすることも多いかと思います。別棟があるとか2号店が近くにあるとか駐車場が別だとか、ピンを複数個打ちたい場合のメモです。

1. ピン(マーカー)を複数打つ方法

google.maps.Markerでピンが打てるようなので、ピンを打つデータを作成してループでnew new google.maps.Marker()すればOK

!function() {
  // ピン(マーカー)のデータ
  var myMarkers = [
    {
      position: [60.142568, 24.989571],
      title: 'Submarine Vesikko'
    },
    {
      position: [60.145866, 24.989367],
      title: 'Sotamuseon Maneesi'
    }
  ];

  function initialize() {
    var myLatlng = new google.maps.LatLng(60.1500745,24.978537);

    // Map Options
    var mapOptions = {
      center: myLatlng,
      zoom: 14
    };

    // Map
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);


    // Add markers
    for(var i=0, l=myMarkers.length; i<l; i+=1) {
      var markerData = myMarkers[i],
          marker = new google.maps.Marker({
            position: new google.maps.LatLng( markerData.position[0], markerData.position[1] ),
            title: markerData.title,
            map: map
          });
    }    
  }

  google.maps.event.addDomListener(window, 'load', initialize);
}();

ピンを増やしたければmyMarkersの配列にピンのデータを持ったオブジェクトを追加すればOKです。
ピンはたくさん打つことができましたが、このピンをクリックしてもピンのデータのtitleが表示される訳ではありませんでした。

Markers | Google Maps JavaScript API | Google Developers
　

2. ピン(マーカー)をクリックしたら吹き出しを出したい

クリックした時に出る吹き出しはInfo Windowsというらしです。
で、クリックした時に表示させるにはaddDomListenerでクリックイベントをピン(マーカー)につければ良いっぽい。
先ほどのコードを編集します。

!function() {
  // ピン(マーカー)のデータ
  var myMarkers = [
    {
      position: [60.142568, 24.989571],
      title: 'Submarine Vesikko',
      content: '潜水艦 べシッコがあるよ'  // Info Windowに表示させる詳細情報を追加
    },
    {
      position: [60.145866, 24.989367],
      title: 'Sotamuseon Maneesi',
      content: '呉造兵廠で作られた120mm砲があるよ'  // Info Windowに表示させる詳細情報を追加
    }
  ];

  function initialize() {
    var myLatlng = new google.maps.LatLng(60.1500745,24.978537);

    // Map Options
    var mapOptions = {
      center: myLatlng,
      zoom: 14
    };

    // Map
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    // Info Window
    var infowindow;

    // show Information Window Event
    var showInfoWindow = function(markerObj) {
      if(infowindow) {
        infowindow.close();
      }
      // marker Object から titleとcontentを取得して表示させる
      var content = '<strong>' + markerObj.getTitle() + '</strong><br />' + markerObj.content;
      infowindow = new google.maps.InfoWindow({
        content: content
      });
      return infowindow.open(map, markerObj);
    };

    // Add markers
    for(var i=0, l=myMarkers.length; i<l; i+=1) {
      var markerData = myMarkers[i],
          marker = new google.maps.Marker({
            position: new google.maps.LatLng( markerData.position[0], markerData.position[1] ),
            title: markerData.title,
            content: markerData.content,  // オブジェクトなので独自のプロパティを作成
            map: map
          });

      // addListener
      google.maps.event.addListener(marker, 'click', function() {
        showInfoWindow(this);
      });
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
}();

Info Windows | Google Maps JavaScript API | Google Developers
情報ウィンドウ｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room 　　

3. Mapのスタイルをカスタマイズする

せっかくなのでMapのデザインも変更してみます。
今回はSnazzy MapsのBlue waterというテーマを当てます。
また先程のjavascriptを編集します。

!function() {
  // ピン(マーカー)のデータ
  var myMarkers = [
    {
      position: [60.142568, 24.989571],
      title: 'Submarine Vesikko',
      content: '潜水艦 べシッコがあるよ'
    },
    {
      position: [60.145866, 24.989367],
      title: 'Sotamuseon Maneesi',
      content: '呉造兵廠で作られた120mm砲があるよ'
    }
  ];

  function initialize() {
    var myLatlng = new google.maps.LatLng(60.1500745,24.978537);

    // Style
var myMapStyle = [{
      featureType: 'all',
      elementType: 'labels.icon',
      stylers: [{visibility: 'off'}]
    }, {
      featureType: 'administrative',
      elementType: 'labels.text.fill',
      stylers: [{color: '#444444'}]
    }, {
      featureType:'landscape',
      elementType: 'all',
      stylers: [{color: '#f2f2f2'}]
    }, {
      featureType:'landscape',
      elementType: 'labels.text.fill',
      stylers: [{color: '#56D0BD'}]
    }, {
      featureType: 'poi',
      elementType: 'all',
      stylers: [{visibility: 'off'}]
    }, {
      featureType: 'road',
      elementType: 'all',
      stylers: [{saturation: -100},{lightness: 45}]
    }, {
      featureType: 'road.highway',
      elementType: 'all',
      stylers: [{visibility: 'simplified'}]
    }, {
      featureType: 'transit',
      elementType: 'all',
      stylers: [{visibility: 'off'}]
    }, {
      featureType: 'water',
      elementType: 'all',
      stylers: [{color: '#46bcec'},{visibility: 'on'}]
    }];

    // Map Options
    var mapOptions = {
      center: myLatlng,
      zoom: 14,
      styles: myMapStyle, // デザインを適応
      mapTypeControl: false,  // 地図や航空写真 の切り替え 無効
      scaleControl: false,  //  スケールの表示 無効
      streetViewControl: false,  // ストリートビュー 無効
      rotateControl: false  // 回転コントロールの表示 無効
    };

    // Map
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    // Info Window
    var infowindow;

    // show Information Window Event
    var showInfoWindow = function(markerObj) {
      if(infowindow) {
        infowindow.close();
      }
      var content = '<strong>' + markerObj.getTitle() + '</strong><br />' + markerObj.content;
      infowindow = new google.maps.InfoWindow({
        content: content
      });
      return infowindow.open(map, markerObj);
    };

    // Add markers
    for(var i=0, l=myMarkers.length; i<l; i+=1) {
      var markerData = myMarkers[i],
          marker = new google.maps.Marker({
            position: new google.maps.LatLng( markerData.position[0], markerData.position[1] ),
            title: markerData.title,
            content: markerData.content,
            map: map
          });

      // addListener
      google.maps.event.addListener(marker, 'click', function() {
        showInfoWindow(this);
      });
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
}();