GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法


GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法
(編集部注*2013年12月18日に公開された記事を再編集したものです。)

どうもです、はやちです(◞‸◟)
いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じますせんか?(◞‸◟)
どーにかこれをうまくデザインできないだろうか(◞‸◟)

ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و

Googleマップを表示させよう

まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝

Googleマップの設置

<script src="http://maps.google.com/maps/api/js?sensor=true">
</script>

headerタグAPIを取得するスクリプトをつけます。

 

<body onload="initialize();">
<div id="map_canvas" style="width:100%;height:500px;"></div>

HTMLにはonlodと表示させるためのタグを用意します。

 
これで配置は完了です。

マップの詳細を設定しよう

次にmapstyle.jsを用意して、マップの詳細を設定します。

JSを書く前にまずはマップを(緯度、経度)の数値に変換しましょう( ˘ω˘)☝
緯度、経度を取得するためにまずはGoogleマップで住所を入れます。

 
eyecatch

次に、右クリックでこの場所についてを選択しましょう。
 
blog2

これで緯度経度が取得されました( ˘ω˘)☝
 
取得された緯度経度を記述しましょう( ˘ω˘)☟

function initialize() {
  var latlng = new google.maps.LatLng(35.710333,139.777148);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, /*表示枠内の中心点*/
    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

これで表示の仕方は完了です、このJSが基本の形になります。( ˘ω˘ )☝

Googleマップのデザインを変えよう

こちらのツールでデザインを変えちゃいましょう( ˘ω˘)☟

  • Styled Map Wizard :

    http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp

  • Styled Map Wizardの使い方はLIGで詳しく紹介されている記事がありますので、あわせてご覧ください。

  • 参照ページ:Googleマップのお手軽カスタマイズ!Styled Maps Wizardの使い方
  •  

    blog3

    彩度・明度・ガンマ調整など細かく調整できます。路線やマークの色味も別で調整することも可能です( ˘ω˘ )☝
     

    blog5

    右にあるバーでスタイルを追加して重ねて調整することができます( ˘ω˘ )☝
     
    調整が完了しましたらボタンを押してコードを取得します。

    blog4

    調整が完了しましたらボタンを押してコードを取得します。
     
    取得されたコードはこの用にはっつけましょう( ˘ω˘ )☟

    function initialize() {
      var latlng = new google.maps.LatLng(35.710333,139.777148);
      var myOptions = {
        zoom: 18,/*拡大比率*/
        center: latlng,/*表示枠内の中心点*/
        mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
      };
      var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    
      /*取得スタイルの貼り付け*/
      var styleOptions = [
      {
        &quot;stylers&quot;: [
          { &quot;saturation&quot;: -100 },
          { &quot;visibility&quot;: &quot;simplified&quot; },
          { &quot;lightness&quot;: 22 }
        ]
      }
    ];
      var styledMapOptions = { name: '株式会社Lig' }
      var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
      map.mapTypes.set('sample', sampleType);
      map.setMapTypeId('sample');
    }
    

    できたかな?
    これでマップのカスタマイズは完了になります( ˘ω˘)☝

    アイコンも配置してみよう

    せっかくなのでアイコンも配置してみましょう( ˘ω˘)☝
    こちら今回用意したアイコン ico こちらの画像を配置します( ˘ω˘)

    書き足したJSがこちらになります( ˘ω˘ )☟
    new google.maps.Sizeで画像のサイズ
    new google.maps.Pointで場所を指定します。

    function initialize() {
      var latlng = new google.maps.LatLng(35.710333,139.777148);
      var myOptions = {
        zoom: 18,/*拡大比率*/
        center: latlng,/*表示枠内の中心点*/
        mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
      };
      var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    
      /*アイコン設定▼*/
      var icon = new google.maps.MarkerImage('ico.png',
        new google.maps.Size(55,72),/*アイコンサイズ設定*/
        new google.maps.Point(0,0)/*アイコン位置設定*/
        );
      var markerOptions = {
        position: latlng,
        map: map,
        icon: icon,
        title: '株式会社Lig'
      };
      var marker = new google.maps.Marker(markerOptions);
     /*アイコン設定ここまで▲*/
    
      /*取得スタイルの貼り付け*/
      var styleOptions = [
      {
        &quot;stylers&quot;: [
        { &quot;saturation&quot;: -100 },
        { &quot;visibility&quot;: &quot;simplified&quot; },
        { &quot;lightness&quot;: 22 }
        ]
      }
      ];
      var styledMapOptions = { name: '株式会社Lig' }
      var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
      map.mapTypes.set('sample', sampleType);
      map.setMapTypeId('sample');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    

    これで完成です( ˘ω˘)☝

    出来上がったものはこちらになります( ˘ω˘)☟

    まとめ

    JSが苦手な私でも、割とすんなり実装することができました✌(´ʘ‿ʘ`)✌<やったお
    サイトのテイストに合わせてGoogleマップもデザインすることでぐっと他のサイトと差が出ますね( ˘ω˘)

    調整がうまくいかない方はサンプルコードを配布しているサイトもあるのでそちらも参考にするのもおすすめです( ˘ω˘)
    先程もご紹介した下記参照ページでもご紹介しています。

  • 参照ページ:Googleマップのお手軽カスタマイズ!Styled Maps Wizardの使い方
  • それでは。

    この記事を書いた人

    はやち
    はやち フロントエンドエンジニア 2010年入社
    フロントエンドエンジニアのはやちです( ˘ω˘)☝
    以前までは顔隠しておりましたが思い切ることにしました…。
    相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌
    今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

    こちらもおすすめ

    JavaScript 第6版

    JavaScript 第6版

    • 著者David Flanagan
    • 価格¥ 4,536(2015/11/25 17:10時点)
    • 出版日2012/08/10
    • 商品ランキング14,289位
    • 大型本840ページ
    • ISBN-104873115736
    • ISBN-139784873115733
    • 出版社オライリージャパン