GoogleMapのデザインカスタマイズ
GoogleMapをサイトに埋め込む場合、アイコンの変更や色などカスタマイズする方法をご紹介します。
目次
GoogleMap API V3のカスタマイズ方法
カスタマイズにはGoogle Map API V3を利用します。
※jQueryを使用した方法になります。
1. htmlにjavascriptの追加
htmlの下の方。/body
の直前?あたりに貼りつけ。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function(){
// マップ設定
var latLng = new google.maps.LatLng(35.681801,139.765998);
map = new google.maps.Map(
document.getElementById("gMap"),
{
zoom: 17,
center: latLng,
scrollwheel: false
}
);
// マーカー設定
var markerImg = {
url: 'images/marker.png'
};
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: markerImg
});
//デザインカスタマイズ
var mapStyle =
[{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
;
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('myMapType', mapType);
map.setMapTypeId('myMapType');
});
</script>
8行目:住所の設定
(35.681801,139.765998);
住所の緯度、経度を指定する。
緯度、経度を調べる方法はgooglemapで表示したい住所を検索しアイコンを置きたい場所で「右クリック」→「この場所について」をクリック。表示された緯度、経度をクリックすると検索窓に緯度経度が入るのでそれをコピペ。
12行目:地図の縮小拡大
サイズを変更すれば地図の縮小拡大ができます。
20行目:アイコン
アイコン画像を指定します。
30行目:スタイルの変更
ここで地図のデザインを変更することができます。
面倒なのでこちらのサイトからコピペしてくると便利でした。
Snazzy Maps
お好みのデザインを選択して「Copy」ボタンでコピーしてくる。
30行目に貼りつけ。
2. CSS
#gMap {
height: 440px;
}
3. html
マップを表示したい場所に設置。
<div id="gMap"></div>
たぶんこんな感じで表示できると思います。ご参考までに。