GoogleMapをサイトに埋め込む場合、アイコンの変更や色などカスタマイズする方法をご紹介します。
GoogleMapのカスタマイズ方法
カスタマイズにはGoogle Map API V3を利用します。
※jQueryを使用した方法になります。
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行目:スタイルの変更
ここで地図のデザインを変更することができます。
面倒なのでこちらのサイトからコピペしてくると便利でした。
https://snazzymaps.com/
お好みのデザインを選択して「Copy」ボタンでコピーしてくる。
30行目に貼りつけ。
スタイルシート
#gMap { height: 440px; }
html
マップを表示したい場所に設置。
<div id="gMap"></div>
たぶんこんな感じで表示できると思います。ご参考までに。