ガジェット通信

見たことのないものを見に行こう

Googleマップを簡単にカッコよくカスタマイズする方法

DATE:
  • ガジェット通信を≫


(編集部注*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マップで住所を入れます。

 

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

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

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 = [
{
&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’);
}

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

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

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

書き足した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);

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

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

demoページ

まとめ

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

調整がうまくいかない方はサンプルコードを配布しているサイトもあるのでそちらも参考にするのもおすすめです( ˘ω˘)
先程もご紹介した下記参照ページでもご紹介しています。
参照ページ:Googleマップのお手軽カスタマイズ!Styled Maps Wizardの使い方

http://liginc.co.jp/web/tool/browser/63680

それでは。

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP