かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

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 MapsBlue 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);
}();

マップオプションのオブジェクトにデザインのオプションを追加してnew google.maps.Map()する時に第2引数に渡してあげるだけですね。

Styled Maps   |   Google Maps JavaScript API   |   Google Developers
Snazzy Maps - Free Styles for Google Maps
Googleマップをイラストマップみたいにしたい。
 
で、完成したMapはこんな感じです。(とても不親切!)

See the Pen google map customize by Chaika (@chaika-design) on CodePen.


[参考]