GoogleMapカスタマイズ

2015.08.13
GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法
はやち
（編集部注＊2013年12月18日に公開された記事を再編集したものです。）
どうもです、はやちです(◞‸◟)
いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じますせんか？(◞‸◟)
どーにかこれをうまくデザインできないだろうか(◞‸◟)
ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و
Googleマップを表示させよう
まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝
Googleマップの設置

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

HTMLにはonlodと表示させるためのタグを用意します。
これで配置は完了です。
マップの詳細を設定しよう
次にmapstyle.jsを用意して、マップの詳細を設定します。
JSを書く前にまずはマップを（緯度、経度）の数値に変換しましょう( ˘ω˘)☝
緯度、経度を取得するためにまずはGoogleマップで住所を入れます。
eyecatch
次に、右クリックでこの場所についてを選択しましょう。
これで緯度経度が取得されました( ˘ω˘)☝
取得された緯度経度を記述しましょう( ˘ω˘)☟
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の使い方
http://liginc.co.jp/web/tool/browser/63680
彩度・明度・ガンマ調整など細かく調整できます。路線やマークの色味も別で調整することも可能です( ˘ω˘ )☝
右にあるバーでスタイルを追加して重ねて調整することができます( ˘ω˘ )☝
調整が完了しましたらボタンを押してコードを取得します。
調整が完了しましたらボタンを押してコードを取得します。
取得されたコードはこの用にはっつけましょう( ˘ω˘ )☟
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 = [
  {
    "stylers": [
      { "saturation": -100 },
      { "visibility": "simplified" },
      { "lightness": 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 = [
  {
    "stylers": [
    { "saturation": -100 },
    { "visibility": "simplified" },
    { "lightness": 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);
これで完成です( ˘ω˘)☝
出来上がったものはこちらになります( ˘ω˘)☟
demoページ
まとめ
JSが苦手な私でも、割とすんなり実装することができました✌(´ʘ‿ʘ｀)✌＜やったお
サイトのテイストに合わせてGoogleマップもデザインすることでぐっと他のサイトと差が出ますね( ˘ω˘)
調整がうまくいかない方はサンプルコードを配布しているサイトもあるのでそちらも参考にするのもおすすめです( ˘ω˘)
先程もご紹介した下記参照ページでもご紹介しています。
参照ページ：Googleマップのお手軽カスタマイズ！Styled Maps Wizardの使い方
http://liginc.co.jp/web/tool/browser/63680
それでは。

株式会社LIG　
https://liginc.co.jp/web/service/other-service/62242