ホームページの会社概要とかでGoogleMap使いますよね。
いつも見慣れたGoogleMapだとちょっと物足りない、自社サイトっぽくGoogleMapのデザインも変えてみたいって思ったことありません?
GoogleMapはマップの色をオリジナルに変更することができます。
ちょっと知識が必要だけれど、そんなに難しくは無いのでチャレンジしてみよう。
GoogleMap APIでマップを表示させる
GoogleMapをカスタマイズするには、GoogleMapページから共有タグとか引っ張ってきて表示させてもダメで、
APIを使ってマップを表示させないといけません。
まずは、
自由にカスタマイズしたければGoogleMap APIを使ってワンランク上のマップ表示を覚えよう
でホームページ上にGoogleMapを表示させましょう。
GoogleMapの色やデザインをカスタマイズする
GoogleMapのデザインを変更するのにコードを直接いじってもいいのですが、
誰でも直感的にデザインを変更できるツール「Styled Maps Wizard」がありますので、
それを使いましょう。
左側にカスタム用のツールがたくさんあって、そこでマップのデザインをいろいろと変更することができます。
たとえば「Invert lightness」というところにチェックを入れるとマップの色が反転します。
基本的な使い方としては
デザインを変える対象を選ぶ
まずはデザインを変えたい対象を選びます。
Feature Typeでは、
道路のデザインを変えたかったら「Road」や川とか海のデザインを変えたかったら「Water」を選びます。
Element Typeでは、
Feature Typeで選んだものに対してラベルを変えたかったら「Labels」、塗りとかを変えたかったら「Geometry」を選びます。
デザインを変更する
対象を指定したらデザインを変えましょう。
赤枠の部分のパラメータを触ってデザインを変更できます。
いろいろと触って試してみてね。
ここでは、YCOMのサイトカラーの緑にしてみました。
マップスタイルを追加する
触ってもらったらわかると思うけれど、このままでは道だけとか水の部分だけとか1つの対象に対してしかデザインが変更できない。
そこで、画面の右側でスタイルを追加しよう。
道のデザインが変更できたら、新しいスタイルを追加して次は水や区画の色を変更してみる。
こんな感じでマップを自由にデザインしよう。
YCOMのカラーに合わせて変えてみたのがこちら。
マップのデザインデータをJSONで書き出す
マップのデザインが出来上がったので、このデザインをJSON形式で書き出します。
これは後ほどGoogleAPIと共に使います。
GoogleMapに適用する
まずはこちらのコードを使ってGoogleMapをホームページに表示させます。
自由にカスタマイズしたければGoogleMap APIを使ってワンランク上のマップ表示を覚えよう
スクリプトの最後の当たりにJSONコードを利用した設定を入れます。
少し難しいスクリプトが入っていますが、まずはそのまま使ってください。
<script type="text/javascript"> /* map */ function initialize() { var latlng = new google.maps.LatLng(35, 135); var myOptions = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), myOptions); // マーカーの設定 var marker = new google.maps.Marker({ position: latlng, map: map }); /* この位置に先ほどのJSONデータを使った命令を入れます */ var samplestyle = [ { "featureType": "road", "stylers": [ { "hue": "#22ff00" }, { "saturation": -45 }, { "gamma": 1.53 } ] },{ "featureType": "landscape", "stylers": [ { "hue": "#00ff19" } ] },{ "stylers": [ { "visibility": "simplified" } ] } ]; var samplestyleOptions = { name: "サンプル" }; var sampleMapType = new google.maps.StyledMapType(samplestyle, samplestyleOptions); map.mapTypes.set('sample', sampleMapType); map.setMapTypeId('sample'); } </script>