Googlemapカスタマイズ方法（レスポンシブ対応）【JavaScript編】
前回のおさらいGoogleMapをレスポンシブ対応で埋め込む【API Key取得編】
今回はGooglemapカスタマイズ方法【JavaScript編】です。
それでは早速…
HTML
<![CDATA[<head><br />
</head><br />
<body onload="initialize();"></p>
<div id="map_custmomize"></div>
<p></body><br />
]]>
もしくは、下記コード
<![CDATA[<head><br />
</head><br />
<body></p>
<div id="map_custmomize"></div>
<p><script>initialize();</script><br />
</body><br />
]]>
<![CDATA[<script>initialize();</script>]]>
を</body>内に記載してください。
CSS
<![CDATA[<br />
#map_custmomize {<br />
width: 100%;<br />
height: 415px;<br />
}<br />
/*画面幅480px以下の設定<br />
---------------------------------------------------------------------------*/<br />
@media (max-width:480px){<br />
#map_custmomize {<br />
width: 100%;<br />
height: 250px;<br />
margin-bottom: 20px;<br />
}<br />
}<br />
]]>
JavaScript
<![CDATA[function initialize() {<br />
var latlng = new google.maps.LatLng(33.57667, 130.41457);/*表示したい場所の経度、緯度*/<br />
var myOptions = {<br />
zoom: 18, /*拡大比率*/<br />
center: latlng, /*表示枠内の中心点*/<br />
scrollwheel: false,<br />
mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/<br />
};<br />
var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);/*マップのID取得*/<br />
/*スタイルのカスタマイズ*/<br />
var styleOptions =<br />
[ {<br />
"featureType":"administrative.province", "elementType":"geometry.fill", "stylers":[ {<br />
"visibility": "off"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"administrative.locality", "elementType":"geometry.fill", "stylers":[ {<br />
"visibility": "on"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"landscape.man_made", "elementType":"geometry.fill", "stylers":[ {<br />
"visibility": "on"<br />
}<br />
, {<br />
"color": "#ffe4e4"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"landscape.natural", "elementType":"geometry.fill", "stylers":[ {<br />
"visibility": "on"<br />
}<br />
, {<br />
"color": "#ffd5db"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"poi", "elementType":"geometry.fill", "stylers":[ {<br />
"visibility": "on"<br />
}<br />
, {<br />
"color": "#bddcff"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"road", "elementType":"geometry", "stylers":[ {<br />
"lightness": 100<br />
}<br />
, {<br />
"visibility": "simplified"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"road", "elementType":"labels", "stylers":[ {<br />
"visibility": "off"<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"transit.line", "elementType":"geometry", "stylers":[ {<br />
"visibility": "on"<br />
}<br />
, {<br />
"lightness": 700<br />
}<br />
]<br />
}<br />
, {<br />
"featureType":"water", "elementType":"all", "stylers":[ {<br />
"color": "#eef5fd"<br />
}<br />
]<br />
}<br />
];<br />
var styledMapOptions = { name: 'Embellir Design' }<br />
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);<br />
map.mapTypes.set('sample', sampleType);<br />
map.setMapTypeId('sample');<br />
/*アイコンの取得*/<br />
var icon = new google.maps.MarkerImage('../images/map-logo.png',/*アイコンの場所*/<br />
new google.maps.Size(50,60),/*アイコンのサイズ*/<br />
new google.maps.Point(0,0)/*アイコンの位置*/<br />
);<br />
/*マーカーの設置*/<br />
var markerOptions = {<br />
position: latlng,/*表示場所と同じ位置に設置*/<br />
map: map,<br />
icon: icon,<br />
title: 'Embellir Design'/*マーカーのtitle*/<br />
};<br />
var marker = new google.maps.Marker(markerOptions);<br />
google.maps.event.addListener(marker, 'click', function() {<br />
infowindow.open(map,marker);<br />
});<br />
google.maps.event.addDomListener(window, "resize", function() {<br />
var center = map.getCenter();<br />
google.maps.event.trigger(map, "resize");<br />
map.setCenter(center);<br />
});<br />
}<br />
]]>
Embellir DesignでのGooglemapカスタマイズをご紹介しました。
当マップはスクロールで拡大されないように設定されています。
もう少し詳しくご紹介します＼(^o^)／
マーカーがクリックされたら情報ウィンドウを表示
<![CDATA[google.maps.event.addListener(marker, 'click', function() {<br />
infowindow.open(map,marker);<br />
});<br />
]]>
レスポンシブ対応にするために
下記コードを記載すればピンの位置をスマホでも地図の中心に配置する事ができます。
リサイズしたときセンタリングする処理を実装
<![CDATA[google.maps.event.addDomListener(window, "resize", function() {<br />
var center = map.getCenter();<br />
google.maps.event.trigger(map, "resize");<br />
map.setCenter(center);<br />
});<br />
]]>
以上となります。
マップのデザインを変えたい方は
Googlemapギャラリーサイト「Snazzy Maps」
コチラから好みのデザインを選んでコピペしたら
<![CDATA[/*スタイルのカスタマイズ*/<br />
var styleOptions =<br />
]]>
より下のコードを変更してください。
※注意※
;（セミコロン）は記載さていないので忘れずに記載してください。
以上です。
それではまた(^_^)/~
