5月更新・前月(4月)の人気記事トップ10 05/02/2023
- ( 02 ↑) 【Mac】MacにGoogle Driveをインストール
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 07 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 04 ↓) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【2022年7月】Mac画面解像度まとめ
- (圏外↑) 【GIMP】線を真っ直ぐ引く方法
- ( 08 ↓) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
【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のデザインがカスタマイズできるコード生成ツール