Googlemapのカラーやピンをカスタマイズする方法

javascript 2016年8月21日

先日進めていた案件で、Googleマップのピンやカラーを変更する業務がありました。 Googleマップの本格的なカスタマイズは初めてで躓く点も多かったので、復習もかねて手順をおさらいします。

<body onload="initialize();">

<div id="ggmap"></div>

      <script src="http://maps.google.com/maps/api/js?key=***************************************"></script>/*googleマップapiの読み込み*/

      <script type="text/javascript">
        function initialize() {
          var latlng = new google.maps.LatLng(36.403848,136.471278);/*表示したい地点の座標*/
          var myOptions = {
            zoom: 18,/*拡大比率*/
            center: latlng, /*表示枠内の中心点*/
            mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
          };
          var map = new google.maps.Map(document.getElementById('ggmap'), myOptions);
        }
      </script>

これが基本形になります。 idに”ggmap”を指定したdiv要素に、マップが表示されます。この要素にはcssであらかじめ高さと幅の指定をします。また、2016年6月からは、googleマップAPIの使用にAPIキーが必要となりましたので、事前にGoogleデベロッパーズのMap API取得ページからAPIキーを取得を行い、 APIの読み込み記述（）の key=以下の部分に取得したキーのIDを代入します。ここまでの工程で、Googleマップの表示が行われます。ですが、これだけでは普通にマップを表示する場合と変わりませんので、 Google Maps API Styled Map Wizardを利用して、マップデザインのカスタマイズを行います。彩度を下げてマップをモノクロにしたり、駅や高速道路の表示を変更できます。 Wizardで好みの変更を選択したら、「JSONコードの表示」を選択し、表示されたコードを先ほどのスクリプトに追加します。

<body onload="initialize();">

<div id="ggmap"></div>

      <script src="http://maps.google.com/maps/api/js?key=***************************************"></script>/*googleマップapiの読み込み*/

      <script type="text/javascript">
        function initialize() {
          var latlng = new google.maps.LatLng(36.403848,136.471278);/*表示したい地点の座標*/
          var myOptions = {
            zoom: 18,/*拡大比率*/
            center: latlng, /*表示枠内の中心点*/
            mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
          };
          var map = new google.maps.Map(document.getElementById('ggmap'), myOptions);

          /*取得スタイルの貼り付け*/
          var styleOptions = [
            {
              "stylers": [
                { "saturation": -100 }
              ]
            }
          ];
          var sampleType = new google.maps.StyledMapType(styleOptions);
          map.mapTypes.set('sample',sampleType);
          map.setMapTypeId('sample');
        }
      </script>

さきほどの記述に、wizardで取得したスタイルを追加しました。この例では、マップの彩度が0、グレースケールでの表示となります。

ピンの画像変更

さて、最後にマップに表示するピンの画像を指定する方法をご紹介します。

<body onload="initialize();">

<div id="ggmap"></div>

      <script src="http://maps.google.com/maps/api/js?key=***************************************"></script>/*googleマップapiの読み込み*/

      <script type="text/javascript">
        function initialize() {
          var latlng = new google.maps.LatLng(36.403848,136.471278);/*表示したい地点の座標*/
          var myOptions = {
            zoom: 18,/*拡大比率*/
            center: latlng, /*表示枠内の中心点*/
            mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
          };
          var map = new google.maps.Map(document.getElementById('ggmap'), myOptions);

          /*アイコン設定*/
        var icon = new google.maps.MarkerImage('/pinimg.png',/*ピン画像のURL*/
          new google.maps.Size(71,77),/*ピン画像のサイズ*/
          new google.maps.Point(0,0),
          new google.maps.Point(19,51)/*ピン画像の座標*/
        );
        var markerOptions = {
          position: latlng,
          map: map,
          icon: icon,
          title: 'アイコン設置',
        };
        var marker = new google.maps.Marker(markerOptions);

          /*取得スタイルの貼り付け*/
          var styleOptions = [
            {
              "stylers": [
                { "saturation": -100 }
              ]
            }
          ];
          var sampleType = new google.maps.StyledMapType(styleOptions);
          map.mapTypes.set('sample',sampleType);
          map.setMapTypeId('sample');
        }
      </script>

「アイコン設定」以下の個所がピンの指定を行っている記述です。 javascriptで長めの記述が必要であったり、 APIキーが必要であったりと、慣れないうちは戸惑うことも多いですが、一度できてしまえば迷うところはあまりないと思います。私も、今後の案件で多用するテクニックだと思いますので、しっかりと身につけたいところです。