GoogleMap（グーグルマップ）の背景色を変更する。
こんにちは、大野です。
とある案件で、GoogleMapの背景色を変更しましたので、そのようなことがしたい方の参考になればと思い投稿させていただきました。
これもネットを探すと情報は出てくるのですが、情報が古かったり、やり方が複雑だったりしたので
とにかく簡単に背景色だけ変更したいって方向けの内容になっています。
まずは、GoogleMapのAPIが使えるように、以下のようにスクリプトを読み込む必要があります。
|
1 |
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script> |
XXXの部分は、GoogleMapのAPIキーを記述します。以前は不要でしたが、現在は、必須となってますので、以下のサイトで取得してください。
次に、地図を埋め込む場所に以下のタグを記述します。
|
1 |
<div id="map-canvas"></div> |
IDは何でも良いのですが、次にやる、cssやスクリプトと合わせてください。
cssは、以下のようにします。
|
1 2 3 4 |
#map-canvas { width: 100%; height: 490px; } |
幅を100%にしてるので、画面いっぱいに広がります。幅を固定したい場合は、widthの値を固定値にしてください。
javascriptは、以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> var latlng = new google.maps.LatLng( 35.699824, 139.415563 ); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ); var styleOptions = [ { "stylers": [ { "hue": "#882747" }, { "saturation": 50 } ], "elementType": "all", "featureType": "all" } ]; var styledMapOptions = { name: '立川グランドホテル' } var sampleType = new google.maps.StyledMapType( styleOptions, styledMapOptions ); map.mapTypes.set( 'sample', sampleType ); map.setMapTypeId( 'sample' ); var markerOptions = { position: latlng, map: map, title: '立川グランドホテル' }; var marker = new google.maps.Marker( markerOptions ); </script> |
簡単に説明します。
まず、表示したい場所の緯度、経度を2行目で指定します。
4行目の「zoom」で、縮尺を指定します。この値を大きくすると詳細に表示されます。
14行目の「hue」に背景にしたい色を指定します。
17行目の「saturation」色の濃さをパーセントで指定します。
hue、saturationの値は、以下のサイトで確認しながら取得することが可能です。
Google Maps API Styled Map Wizard
ちなみに、上記スクリプトでは、背景色がピンクっぽく表示されます。
ブラウザで実際に見てみると．．．
こんな感じです。
以下、いくつか例を、上記スクリプトからsaturationのみ変更しています。
黄色（#ffff00）
赤色（#ff0000）
青色（#000aff）
簡単でしたね。
それでは、また。
ホームページ、ちらし、看板など、お店のPRはアミテスにお任せください！
お問合せＴＥＬ：042-539-1233
お問合せメール：support@amites.co.jp
ホームページ：https://amites.co.jp
ＦＢ：https://www.facebook.com/amites.co.jp/
