NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.08.13

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

はやち

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

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

※この記事は、2013年12月18日に公開された記事を再編集したものです。

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の使い方はLIGで詳しく紹介されている記事がありますので、あわせてご覧ください。

 

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 = [
{
"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);

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

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

まとめ

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

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

それでは。
LIGではエンジニアを募集しています!