• Google Maps API Styled Map Wizardを使ってみた

    Google Maps API Styled Map Wizardでできること

    店舗の場所などを掲載するときに Google Map APIを利用されることもあると思います

    Google Maps(グーグルマップ)はとても便利なんですが
    サイトのデザインとGoogle Mapが合わないんだよね って思う人も多いでしょう

    そこで「Google Maps API Styled Map Wizard」を利用して
    簡単にGoogle Mapのデザインを変更する方法を紹介します

    ご紹介ありがとうございます
    バシャログ。さま
    アクセスが急に増えてびっくりしてます!

    目次

    1. Google Maps API Styled Map Wizardでできること
    2. Google Maps API Styled Map Wizardの使い方
    3. Google Maps API Styled Map Wizard設定項目一覧
    4. Google Maps API Styled Map Wizard使ってサンプル作ってみた
    5. 日本語表示とかアレンジもしてみた

    Google Maps API Styled Wizardの使い方

    「Google Maps API Styled Map Wizard」

    screenshot_11
    この画面から スタイルを変更できます

    ※最近デザインが一新されました(2011/10/5に確認)
    styled-maps-wizard_new

    • 「Feature type」でスタイルを変更したい項目を選択
    • 「Stylers」でどんなスタイルにしたいのか設定
    • 「Add Style」をクリックしてスタイルを適用
    • 変更したスタイルは プレビューマップにリアルタイムに反映され
      適用したスタイルは「Map Style」に追加されていきます
    • 最後に「showJSON」をクリックすると コードが表示されるので
      そのコードを貼り付ければOKです

    設定項目

    Google Maps API Styled Map Wizard設定項目の詳細もあります

    Google Maps API Styled Map Wizard使ってサンプル作ってみた

    Google Map APIを利用したGoogleマップの表示例

    sample.html
    
    <html>
    <head>
     :
    <link rel="stylesheet" href="sample.css">
    <script src="http://www.google.com/jsapi/"></script>
    <script src="sample.js"></script>
     :
    </head>
    <body>
     :
    <div id="map"></div>
     :
    </body>
    </html>
    
    
    • 「<script src=”http://www.google.com/jsapi/”></script>」はGoogle Ajax APIを使うときに必要です
    • 「<script src=”sample.js”></script>」で外部ファイルの「sample.js」を読み込みます
    • 「<div id=”map”></div>」ここにGoogleマップが表示されます
    sample.js
    
    google.load("maps", "3.x", {"other_params":"sensor=false"});
    
    //マップの初期設定
    function initialize() {
    	
    //マップの中心座標
      var myLatLng = new google.maps.LatLng(35.47381, 139.59031);
    	
    //マップの設定オプション
      var myOptions = {
        zoom: 10,                                 //ズームレベル
        center: myLatLng,                         //中心座標
        mapTypeId: google.maps.MapTypeId.ROADMAP  //マップタイプ
      };
    	
      map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    }
    
    //作成したマップの呼び出し
    google.setOnLoadCallback(initialize);
    
    
    sample.css
    
    @charset "utf-8";
    html,body{
      width: 100%;
      height: 100%;
    }
    #map{
      width: 100%;
      height: 100%;
    }
    
    

    表示したいGoogleマップのサイズ指定を100%にしたいときは
    親要素のサイズ指定がないとGoogleマップが表示されないことがあります

    Google Maps API Styled Map Wizardを使ってスタイルを変えていきます

    screenshot_21

    1.海の色を明るくしてみます

    screenshot_12

    【Feature type】 : 「All > Water」
    【Stylers】 : 「Hue : #00ffff」 「Lightness : 50」
    こんな感じに設定して「Add Style」をクリック

    2.公園の緑を濃くしてみます

    screenshot_3

    【Feature type】 : 「All > Point of interest > Park」
    【Stylers】 : 「Gamma : 0.4」
    「Add Style」をクリック

    3.道路を消してみます

    screenshot_41

    【Feature type】 : 「All > Road」
    【Stylers】 : 「Visibility : off」
    「Add Style」をクリック

    5.線路も消してみます

    screenshot_5

    【Feature type】 : 「All > Transit」
    【Stylers】 : 「Visibility : off」
    「Add Style」をクリック

    できたJSONコードを貼り付ける

    いろいろスタイルを設定できたら
    「showJSON」をクリックすると JSONコードが表示されます

    できあがったJSONコード
    
    [
      {
        featureType: "poi.park",
        elementType: "all",
        stylers: [
          { gamma: 0.4 }
        ]
      },{
        featureType: "water",
        elementType: "all",
        stylers: [
          { hue: "#00ffff" },
          { lightness: 50 }
        ]
      },{
        featureType: "road",
        elementType: "all",
        stylers: [
          { visibility: "off" }
        ]
      },{
        featureType: "transit",
        elementType: "all",
        stylers: [
          { visibility: "off" }
        ]
      },{
        featureType: "all",
        elementType: "all",
        stylers: [
    
        ]
      }
    ]
    
    

    このコードをsample.jsに貼りつけてみましょう

    スタイルを追加したsample.js
    
    google.load("maps", "3.x", {"other_params":"sensor=false"});
    
    //マップの初期設定
    function initialize() {
    
    //マップの中心座標
      var myLatLng = new google.maps.LatLng(35.47381, 139.59031);
    
    //マップの設定オプション
      var myOptions = {
        zoom: 10,                                 //ズームレベル
        center: myLatLng,                         //中心座標
        mapTypeId: google.maps.MapTypeId.ROADMAP,  //マップタイプ
        mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
        }
      };
    
      map = new google.maps.Map(document.getElementById("map"), myOptions);
    
      var samplestyle = [
        {
          featureType: "poi.park",
          elementType: "all",
          stylers: [
            { gamma: 0.4 }
          ]
        },{
          featureType: "water",
          elementType: "all",
          stylers: [
            { hue: "#00ffff" },
            { lightness: 50 }
          ]
        },{
          featureType: "road",
          elementType: "all",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "transit",
          elementType: "all",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "transit",
          elementType: "all",
          stylers: [
            { gamma: 0 },
            { visibility: "off" }
          ]
        }
      ];
      
      var samplestyleOptions = {
        name: "シンプル"
      };
      
      var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
      map.mapTypes.set('simple', sampleMapType);
      map.setMapTypeId('simple');
    }
    
    //作成したマップの呼び出し
    google.setOnLoadCallback(initialize);
    
    samplestyleとしてスタイルを設定
    
    var samplestyle = [
        {
          featureType: "poi.park",
          elementType: "all",
          stylers: [
            { gamma: 0.4 }
          ]
        },{
          featureType: "water",
          elementType: "all",
          stylers: [
            { hue: "#00ffff" },
            { lightness: 50 }
          ]
        },{
          featureType: "road",
          elementType: "all",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "transit",
          elementType: "all",
          stylers: [
            { visibility: "off" }
          ]
        },{
          featureType: "transit",
          elementType: "all",
          stylers: [
            { gamma: 0 },
            { visibility: "off" }
          ]
        }
      ];
    
    
    スタイルのオプションを設定
    
      var samplestyleOptions = {
        name: "シンプル"
      };
    
    

    追加したスタイルの名前を「シンプル」と付けました

    「new google.maps.StyledMapType(スタイルの設定, オプション)」でマップスタイルを作成
    
      var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions);
    
    

    追加したスタイルとオプション設定を 変数「sampleMapType」とします

    Googleマップに表示させるためにマップタイプを作成
    
      map.mapTypes.set('simple', sampleMapType);
    
    

    作成したマップスタイルを「simple」というIDを付けてマップタイプを作成します

    マップタイプIDには「ROADMAP」「SATELLITE」「HYBRID」「TERRAIN」が用意されており
    「google.maps.MapTypeId.ROADMAP」のように指定することができます

    Googleマップでマップタイプ「simple」を選択できるようにする
    
        mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
        }
    
    

    「mapTypeIds:」はGoogleマップで選択できるマップタイプを設定できます
    ※通常 画面右上に表示されているボタン部分です

    初期のマップタイプを「simple」に設定する
    
      map.setMapTypeId('simple');
    
    

    こうすることで Googleマップを表示したときのマップタイプを「simple」に設定することができます

    サンプルの完成

    今回作ったサンプルマップscreenshot_13
    右上のボタンからスタイルを切り替えることもできます

    だいぶ印象が変わりますね

    こんな感じで サイトのデザインに合わせたGoogleマップを作ることができます

    日本語表示とかアレンジもしてみた

    いつの間にか使えなくなってました…
    ちょっと他の方法を考えてみます
    ※2011/8/11現在 日本語版も利用できます
    一時的に動かなかっただけかもしれません

    screenshot_4
    Google Maps API Styled Map Wizard日本語版

    変更ポイント

    • 各設定項目を日本語表記
    • MAPのサイズを大きくした
Comments are closed.