GoogleMapをカスタムしてグレースケール&オリジナル画像マーカーの地図を作る方法

2015/09/08

書いた人：: tanippa!
カテゴリ：: javascript Web制作
：: API javascript
72,623 views

色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。

※※※※※2017年6月現在 Google Map APIの利用のために API KEY取得が必要になっております。

色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。

今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。

今回の目標

スクリーンショット 2015-08-31 13.46.22

今回の目標は、↑のようなグレースケールでマーカーにオリジナル画像を使った地図を表示することです。

では、まず基本から見て行きましょう！

基本

カスタマイズのためにはGoogleが提供しているGoogleMapApi v3を利用します。API?v3?ってなる人も多いと思いますが、とりあえずそういう名前なんだってスルーしてもらって構わないです。

では、とりあえず例として弊社を表示する地図を表示してみましょう。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Google Map Custom Tutorial</title>

  <style>
    /*
    地図を表示するための領域のスタイル指定
    サイズがしていされていないと地図が正常に表示されないので必ず指定しましょう
    */
    #map {
      width: 600px;
      height: 300px;
    }
  </style>
</head>
<body>

  <!-- 地図を表示するための領域 -->
  <div id="map"></div>

  <script>
    function initMap() {

      // 地図の初期中心座標を指定
      var latLng = new google.maps.LatLng(34.683497, 135.4888082);

      var map = new google.maps.Map(
        // getElementByIdには、地図を表示するための領域に
        // 指定したidを設定すること。（今回は「map」）
        document.getElementById("map"),
        {
          zoom: 18,  // 地図の初期拡大率
          center: latLng, // 先ほど設定した中心座標を設定
          scrollwheel: false  // マウスホイールで拡縮しなくなる
        }
      );

      // マーカーの設定
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
</body>
</html>

結果

説明

結果を見てもらえばわかりますが、なんの変哲もないGoogleMapですね。こんな表示の仕方ならわざわざGoogleMapAPIを利用する必要もないのですが、これからカスタマイズする為の基本形になりますのでわりと重要です。

コメントでも注釈を入れていますが、注意点としては、

21行目：地図を表示する為の領域をdivタグ等で作り、idを指定しておく
32行目：スクリプト内のgetElementByIdでは、地図表示領域のidを指定する
7~16行目：地図表示領域にはサイズを指定する
47行目：callback=~にはscriptタグで指定した関数名（今回は24行目の関数）を設定する

また、デフォルトだと地図上でマウスホイールを回した際に地図が拡縮するのですが、ページをスクロールしようとしたのに地図が拡縮するといった事が頻繁に発生し、ものすごいストレスフルなので「scrollwheel: false」の指定でマウスホイールに反応しないようにしています。マウスホイールでの拡縮を残しておきたい場合はこの行は削除しましょう。

マーカーにオリジナル画像を指定する

次に、マーカーをオリジナル画像に変える方法を説明したいと思います。

ソースコード

scriptタグ内以外は先ほどと同じなので、scriptタグ部分のみを記載します。

<script>
  function initMap() {

    // 地図の初期中心座標を指定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);

    var map = new google.maps.Map(
      // getElementByIdには、地図を表示するための領域に
      // 指定したidを設定すること。（今回は「map」）
      document.getElementById("map"),
      {
        zoom: 18,  // 地図の初期拡大率
        center: latLng, // 先ほど設定した中心座標を設定
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // マーカーの設定
    var markerImg = {
      url: '/img/marker.png'  // マーカーの画像ファイルを指定
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>

結果

マーカーの画像が変わりました。このカスタマイズは非常に簡単ですね。

Tips: オリジナルマーカーのRetina対応

「marker.png」を実際に表示させる2倍のサイズで用意し、「var markerImg」の部分を以下のように変更すればRetina対応できます。

var markerImg = {
  url: '/img/marker.png',
  scaledSize : new google.maps.Size(40, 46)
};

「scaledSize」では、画像のサイズの1/2サイズを指定しています。

Tips: マーカーをクリックした時に特定の処理を行いたい。

少し応用になるのですが、マーカーをクリックした際に特定の処理をする必要が出る場合が結構あります。

その場合は以下の様なコードを追加することで対応できます。

marker.addListener(
  'click',
  function(){
    // ここにさせたい処理を入れる
    alert('marker clicked.')
  }
);

地図をグレースケールにする

では最後は、地図自体のデザイン変更を説明したいと思います。

今回はグレースケールにする方法を例とします。

ソースコード

<script>
  var map;
  function initMap() {

    // マップ基本設定
    var latLng = new google.maps.LatLng(34.683497, 135.4888082);
    map = new google.maps.Map(
      document.getElementById("map"),
      {
        zoom: 18,  // 拡大率
        center: latLng,
        scrollwheel: false  // マウスホイールで拡縮しなくなる
      }
    );

    // マーカー設定
    var markerImg = {
      url: '/img/marker.png'
    };
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: markerImg
    });

    /***********************************************************************
    変更部分ここから
    **********************************************************************/
    // 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
    var mapType = new google.maps.StyledMapType(mapStyle);
    map.mapTypes.set('GrayScaleMap', mapType);
    map.setMapTypeId('GrayScaleMap');
    /***********************************************************************
    変更部分ここまで
    **********************************************************************/

  }
</script>

結果

説明

肝は、

var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];

の部分です、この部分で地図のデザインを指定しています。

「saturation」は「彩度」という意味で、この値によって色の鮮やかさが変わります。「-100」が一番小さい値で、この最低値を指定することで地図がグレースケールになります。

この設定ですが、Google Maps API Styled Maps Wizardを利用することで視覚的に設定値を得ることが出来ます。

今回のグレースケールのパターン以外にも、設定次第で色々なスタイルを作成出来ますので、試してみましょう。

以上

以上で簡単なGoogleMapのカスタマイズが出来るようになりました。GoogleMapのカスタマイズは、特にデザイン性の高いサイトで必要になることが多いので是非出来るようになっておきましょう。

以上、たにっぱでした〜

今回の目標

基本

ソースコード

結果

説明

マーカーにオリジナル画像を指定する

ソースコード

結果

Tips: オリジナルマーカーのRetina対応

Tips: マーカーをクリックした時に特定の処理を行いたい。

地図をグレースケールにする

ソースコード

結果

説明

以上

この記事を読んだ人はこんな記事も読んでいます