デザイン的に、グーグルマップのカラーリングって結構浮いたりするときがあります。
そんな時は、グーグルマップを白黒にしてしまいましょう！
とっても簡単にグーグルマップを白黒にできます。
こちらのコピペしてエディタに貼り付けてください。
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function initialize() { var latlng = new google.maps.LatLng(34.672243, 135.20255); var opts = { zoom: 13, center: latlng, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 表示エリアのID名を指定。この場合id="map"のところに出力されます */ var map = new google.maps.Map(document.getElementById("map"), opts); /* 地図style */ var styleOptions = [{ 'stylers': [{ 'gamma': 0.8 }, { 'saturation': -100 }, { 'lightness': 20 }] }] //地図の切り替えボタン var styledMapOptions = { name: 'モノクロ地図' } var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('mono', monoType); map.setMapTypeId('mono'); //マーカーの画像パス(相対、絶対どっちでも) var image = 'http://flat-g.net/wordpress/wp-content/themes/bluestreet_child/images/flatg01.png'; var Marker = new google.maps.Marker({ position: latlng, map: map, icon: image//デフォルトのマーカーを表示する場合は指定無し }); //マップのタイトル var contentString = 'マップのタイトル'; var infowindow = new google.maps.InfoWindow({ content: contentString }); //infowindow.open(map, lopanMarker);//初期状態で吹き出しを表示させる場合は有効にする google.maps.event.addListener(Marker, 'click', function() { infowindow.open(map, Marker); }); } google.maps.event.addDomListener(window, 'load', initialize); |
座標をこちらから取得して、書き換えてください。
■グーグルマップ座標取得
http://www.geocoding.jp/
※34.672243, 135.20255といった数値
またマーカー画像もお好きなものに変えちゃってください。
こちらは当社のロゴを入れています。
書き換えたら、JSファイルをご自分のサーバーにアップしてください。
あとは、これを貼り付けるだけ。ただし、先ほどアップしたJSファイルの指定場所だけは間違わないように。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <header> <!--APIの呼び出し--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!--さっき作ったmap.jsの呼び出し--> script type="text/javascript" src="http://www.flat-g.net/wordpress/wp-content/themes/bluestreet_child/js/map.js"></script> </header> <body> <!--id="map"の所にマップ出力--> <div id="map" style="width:100%; height: 500px;"></div> </body> </html> |
以上、たったの3ステップ！
さあ、やってみましょう。