【Labs】Googleマップをカスタマイズ

*現在こちらのサンプルはGoogleマップ仕様変更のため表示されません。

こんにちは（・∀・）

Styled Maps WizardというサイトでGoogleマップをカスタマイズすることができるのはご存知でしょうか。

ただしこちらのサイト、英語なのでちょっとわかりづらいかもしれません。

でも安心してください、とても簡単にGoogleマップをカスタマイズできる日本語のサイトがあります。こちらのコードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツールというサイトのコード生成ツールを使えば簡単にGoogleマップのカスタマイズができてオリジナルデザインのGoogleマップを作成することができます。

Googleマップのカスタマイズ

こちらのサイトですが、簡単にカスタマイズすることを目的としているようでカスタマイズはピン画像と色の変更のみとなっております。ですが、それだけでもマップのイメージはだいぶ変わると思います。サンプルでマップを出力してみましたのでぜひご参考にしてみてください。

サンプル

JavaScript

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 <script type="text/javascript">
 function googleMap() {
 var latlng = new google.maps.LatLng(35.679808, 139.764887);/*座標*/
var myOptions = {
 zoom: 16, /*拡大比率*/
center: latlng,
 mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
 };
 var map = new google.maps.Map(document.getElementById('map1'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('/icon.png',/*画像url*/
 new google.maps.Size(70,50),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
 );
var markerOptions = {
 position: latlng,
 map: map,
 icon: icon,
 title: 'KITTE',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
 };
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
 {
 "stylers": [
 { "hue": '#9fb7d4' }
 ]
 }
 ];
var styledMapOptions = { name: 'KITTE' }/*地図右上のタイトル*/
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
 map.mapTypes.set('style', sampleType);
 map.setMapTypeId('style');
 };
 google.maps.event.addDomListener(window, 'load', function() {
 googleMap();
 });
 </script>
 <div class="maps" id="map1"></div>

Result

通常のGoogleマップ。

こちらはカスタマイズしたGoogleマップです。hueの色味を青くしてピン画像を変更しました。

このサンプルを使用すればサイトのイメージに合わせた色味の地図を作成することができます。

参考

コードが分からなくてもgoogle mapのデザインがカスタマイズできるコード生成ツール