Google マップ Styled Maps Wizardを使ってカスタマイズする方法 ホームページ制作 | 墨田区

Google マップ Styled Maps Wizardを使ってカスタマイズする方法

LINEで送る
Pocket

Googleマップをカスタマイズする方法をご紹介します。
カスタマイズには Styled Maps Wizard を使うと簡単にカスタマイズができます。Web上で色や表示の設定を一つずつ変えていくことでマップの雰囲気をがらりと変えられます。オリジナルの Google マップを作ってみんなに自慢しましょう^^
ここでは Google Maps API Styled Map Wizard の使い方とJavascript への適用方法をご紹介します。
Google マップ Styled Maps Wizardを使ってカスタマイズする方法



【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Styled Map WizardでGoogleマップをカスタマイズする

Google Maps API Styled Map Wizard を利用するには Google Chrome、Firefox、Safari のいずれかのブラウザが必要になります。Internet Explorer では使えないのでご注意ください。
IEをご利用の方は こちら を参考にブラウザのインストールをしてみてください。
今こそ代替ブラウザへ移行を!

まずは How to use the Styled Maps Wizard を閉じましょう。
How to use the Styled Maps Wizardを閉じる

画面右上から場所を入力して、地図を表示します。
ここでは墨田区の新名所となった東京スカイツリー周辺の地図を表示します。
墨田区の新名所である東京スカイツリーを検索


マップの色を変える

まずは、地図上の色を変えてみましょう。
色を変えるには Selectors の Hue を変更します。
色はSelectorsのHueを変更する

カラーパレットを選択して色を変えます。ここでは #0800ff を選択しました。
Hueを変更したGoogleマップ

がらりと雰囲気が変わりましたね。
こんな感じで直感的に操作できるのも、このツールの魅力です。


パーツの表示を変える

各パーツの表示を変えてみましょう。
Selectors ⇒ Feature Type から All ⇒ Road ⇒ Highway ⇒ Controlled access を選択します。Hue のカラーパレットを選択します。
※ここでは #ff00ff を選択しました。
色の変更を高速道路に指定

高速道路だけがピンク色になりましたね。
ちょっと目立ちすぎなので、目立たないように調整しましょう。
Saturation=-30、Lightness=30としましょう。
バーを左に動かすとマイナス値になり、右に動かすとプラス値になります。
Saturation、Lightnessで色調整

うん、高速道路のピンクがやわらかい感じになりましたね。
色調整してやわらかい色になった

次に駅を赤くしてみましょう。
画面右の MAP Style で Add ボタンを押下します。
Map Styleを追加

Selectors ⇒ Feature Type から All ⇒ Transit ⇒ Station ⇒ Rail を選択します。
Hue のカラーパレットを選択します。
※ここでは #ff0000 を選択しました。
駅を赤くしてみた

駅が赤くなりました。

これでオリジナルのマップが出来上がりました。
スタイルを変えたので、画面右上の MAP Style には以下の表示がされています。
Map Style

このようにスタイルを追加していくと、マップ上の色や表示が変更できます。色々試してオリジナルの Google マップを作ってみてください。


ソースを出力する

マップスタイルが決まったらソースを出力します。
Map Style の下の方に Show JSON ボタンがあるので押下してみましょう。
Show JSON

するとスタイルソースが表示されますので、コピーしましょう。これを自前で作った Google マップに適用します。
スタイルコード


スタイルをGoogleマップに適用する

作ったスタイルをマップに適用する方法です。
Google マップの基本操作は こちらページ をご覧ください。
Google マップ API V3 入門編
Google マップ API V3 実用編


js

先ほどコピーしたソースは styles 変数に格納します。
google.maps.StyledMapType の引数として利用します。

var styles = [
  {
    "featureType": "road.highway.controlled_access",
    "stylers": [
      { "hue": "#ff00ff" },
      { "lightness": 30 },
      { "saturation": -30 }
    ]
  },{
    "featureType": "transit.station.rail",
    "stylers": [
      { "hue": "#ff0000" }
    ]
  }
]
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

google.maps.Map への引数である mapOptions 配列には mapTypeControlOptions として配列を設定します。

mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}

この時にスタイルの名前を指定します。ここでは map_style としていますが後続でも必要な名前となりますのでネーミングには注意しましょう。
※スタイルを設定しない場合は mapTypeControlOptions の部分が mapTypeId: google.maps.MapTypeId.ROADMAP となります。

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

google.maps.Map によって作られたマップの mapTypes に、先ほど指定した名前(map_style) と google.maps.StyledMapType で作られた変数を引数に設定します。
setMapTypeId で 指定した名前(map_style) を設定すればOKです。

全ソースは以下のようになります。

function initialize() {
  var latlng = new google.maps.LatLng(35.710019,139.810681);
  var styles = [
    {
      "featureType": "road.highway.controlled_access",
      "stylers": [
        { "hue": "#ff00ff" },
        { "lightness": 30 },
        { "saturation": -30 }
      ]
    },{
      "featureType": "transit.station.rail",
      "stylers": [
        { "hue": "#ff0000" }
      ]
    }
  ]
  var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
  var mapOptions = {
    zoom: 15, // 拡大比率
    center: latlng, // 表示枠内の中心点
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

html

htmlは以下のようになります。
body タグの onload で initialize メソッドを呼び出します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmap3.js"></script>
</head>
<body onload="initialize();">
  <div id="map_canvas" style="width: 100%; height: 300px; margin: 10px 0;"></div>
</body>
</html>

ブラウザで表示すると、作ったスタイルが適用されているのがわかります。
オリジナルスタイルを適用したGoogleマップ


参考サイト

スタイル付き地図 – Google Maps JavaScript API v3 — Google Developers
Styles
※スタイルに悩んだら使ってみよう。


まとめ

Google Maps API Styled Map Wizard は直感的な操作もできるので、とても使えるツールだと思います。英語が苦手な方には 旧バージョンですが日本語版もあります。
日本語版 Google Maps API Styled Map Wizard
オリジナルの地図を作って他社との差別化を図るのも面白いですね。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメント - Thank you for the comment.

  1. ニシモト

    2016/02/09 17:22

     

    お世話になります。
    いつも参考にさせて頂いております。

    まだ趣味でWEB制作を始めた素人なのですが、Googleマップのカスタマイズ方法についてご質問があります。

    宜しければご教授頂けると幸いです。

    現在、こちらのサイトのテンプレートを使用しております。

    http://bootstrapmaster.com/themes/free-bootstrap-themes/essentia-fr

    このサイトにあるGoogleMapの色やマーカーのカスタマイズをしたいのですが、上手く行きません。

    こちらの記事を参考に色々と試しているのですが上手く行っておりません。
    http://www.saka-en.com/javascript/googlemap-styled-maps-wizard-customize/

    この記事の方法単独ではDEMO通りに出来るのですが、使用しているテンプレートサイトには適用できず困っております。

    こちらの方法でなくても結構ですので、使用しているテンプレートサイトのGoogleMapのカスタマイズ方法をご教授頂けると有難いです。

    お手数をお掛け致しますが宜しくお願い致します。

    返信

     
    •  

      コメントありがとうございます。今回のケースでいくと、テンプレートのjsフォルダにgmap3.js(initializeメソッドのJavascriptファイル)を保存してください。

      次に44行目辺りのbodyにonload=”initialize();を追加します。
      <body>
      ↓↓↓↓
      <body onload=”initialize();”>

      次に847行目辺りのid=”googlemaps”の下のdivタグ(id=”map”)をコメントし、上述のgmap3.jsの読み込みとmap_canvasのdivを記述すれば今回のスタイルが適用されます。
      <div id=”googlemaps”>
      <!––div id=”map” class=”google-map google-map-full”></div––>
      <script src=”js/gmap3.js”></script>
      <div id=”map_canvas” style=”width: 100%; height: 300px; margin: 10px 0;”></div>
      </div>

      こちらにサンプルを用意しておりますので、参考にしてみてください。
      http://saka-en.com/examples/essentia.bootstrapmaster/index.html

      返信

       
      • ニシモト

        2016/02/11 00:32

         

        すいません。
        もう一点だけお伺いさせて下さい。

        お教え頂いた内容で希望通りカスタマイズする事が出来たのですが、透かしの背景になっているMapには反映されておりません。
        この部分にもカスタマイズを反映させるにはどの部分に追記すれば宜しいでしょうか?

        何度も大変申し訳ございませんが、何卒宜しくお願い致します。

        返信

         
        •  

          792行目あたりにid=”mapBg”という箇所がありますよね?ここが透かしのGoogle Mapsを表示している場所です。CSSで制御されているようです。
          919行目あたりに

          address: ‘San Francisco, United States’, // Your Adress Here

          という箇所がありますので、これを自分の好きな地域に変更すればよろしいかと思います。

          例えば、

          address: ‘Tokyo, Japan’, // Your Adress Here

          みたいな感じですね。

          返信

           
          • ニシモト

            2016/02/12 00:47

             

            ご返信大変ありがとうございます。

            そこを変更すれば希望の場所を表示出来るのですが、Mapの色変更などのカスタマイズがメインのMapと同じ様に適用されず困っております。
            説明不足で申し訳ございません。

            大変申し訳ございませんが、何卒宜しくお願い致します。

             
          •  

            一番簡単な方法としてはgmap3.js内のinitialize()メソッドに引数を追加します。
            initialize(id)としましょう。
            26行目の
            var map = new google.maps.Map(document.getElementById(
            ‘map_canvas’), mapOptions);
            を、
            var map = new google.maps.Map(document.getElementById(id), mapOptions);
            に変更します。
            bodyタグのonloadを
            onload=”initialize(‘map_canvas’);initialize(‘mapBg’);”
            に変更すれば表示されますよ。
            サンプルをアップしたので見てみてください。
            http://saka-en.com/examples/essentia.bootstrapmaster/index.html

             
  2. ニシモト

    2016/02/10 23:49

     

    お世話になっております。
    お忙しい中、ご返信およびサンプルまでご提供して頂き大変ありがとうございます!
    こちらで一度トライさせて頂きます。
    また何かありましたらお教え頂けると幸いです。
    本当にありがとうございました!

    返信

     
  3. ニシモト

    2016/02/14 00:34

     

    お世話になっております。
    ご返信が遅くなり申し訳ございません。

    お忙しい中、何度もご返信およびサンプルまでご提供して頂き大変ありがとうございました。

    こちらで一度自分なりにカスタマイズさせて頂きたいと思います。

    本当にありがとうございました!
    今後とも宜しくお願い致します。

    返信

     

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL