CREATOR BLOG

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

2014/02/19
tan
  • このエントリーをはてなブックマークに追加

google mapのデザインをカスタマイズできるのはご存知でしょうか。
もともとデザイン性の高いgoogle mapですが、更に色味やアイコンを変えることでサイトのテイストにあったmapを簡単に作ることができます。

いくつか項目を入力し、生成されたコードをコピペするだけ(ちょっとだけ調整する必要あり…)で
あなたのサイトにあったgoogle mapを設置してみませんか!

手順

1.入力項目を埋める
2.ボタンを押して、地図とコードを生成する
3.コードをコピペする
4.アイコン画像をダウンロードし、javascript内の「icon.png」の画像パスを変更する

たったこれだけです!
今回簡単にカスタマイズできることを目的としているため、デザインは色だけ変更できます。
もちろんこれをベースにアイコンを変えてみたり、デザインを更にカスタマイズしたりしてみてください。
このあたりは素敵な記事が既にありますので、参考サイトを御覧ください。

参考サイト

JavaScriptが苦手なあなたへ!グーグルマップを簡単にカッコよくカスタマイズする方法
Googleマップのお手軽カスタマイズ!Styled Maps Wizardの使い方
Googleマップをイラストマップみたいにしたい。

google mapデザインカスタマイズコード生成ツール


タイトル
座標

google map上で「右クリック」>「この場所について」をクリックすると、検索窓に座標が出る

参考:カラーコード (Color Code) 作成ツール
縦幅 px
横幅 px
拡大比率 数値を大きくするほど拡大

地図を生成、コードを再出力する

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function googleMap() {
var latlng = new google.maps.LatLng(,);/* 座標 */
var myOptions = {
zoom: , /*拡大比率*/
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,84),/*アイコンサイズ*/
new google.maps.Point(0,0)/*アイコン位置*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '',/*タイトル*/
animation: google.maps.Animation.DROP/*アニメーション*/
};
var marker = new google.maps.Marker(markerOptions);

/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "hue": '#' }
]
}
];

var styledMapOptions = { name: '' }/*地図右上のタイトル*/
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 id="map1" style="width:px; height:px; margin:0 auto;"></div>

アイコン画像

ご自由にお使いください。
※ダウンロードしてからご利用ください。
icon

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive