Google Map・よくある6つの要望に Google Maps JavaScript API で対応
「Google APIキーの発行って面倒じゃないの…?」
Googleアカウントを持っていれば、公式サイトで簡単に発行できるので大丈夫。
検証済みブラウザとOS
- IE 9~
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X El Capitan
- iOS 9
- Android 5 / 6
6つ含めた完成形
1 2 3 4 5 6 | <div id="garden"></div> <div id="tea"></div> <div id="spa"></div> <script src="js/googlemap.js"></script> <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBOvY0hleYIX8ld-UJsUeJVWMZY5fxJ2rk&callback=initMap" async defer></script> |
1 2 3 4 | #garden, #tea, #spa { height: 50%; margin-bottom: 50px; } |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | var garden, tea, spa; function initMap() { // 緯度経度 var kenrokuen = {lat: 36.562348, lng: 136.662630}, chayagai = {lat: 36.572684, lng: 136.666474}, yuwaku= {lat: 36.488488, lng:136.755551}; garden = new google.maps.Map(document.getElementById('garden'), { zoom: 16, center: kenrokuen, scrollwheel: false }); tea = new google.maps.Map(document.getElementById('tea'), { zoom: 16, center: chayagai, scrollwheel: false }); spa = new google.maps.Map(document.getElementById('spa'), { zoom: 16, center: yuwaku, scrollwheel: false }); // マーカー var image_garden = "//keitahirai.net/wp-content/uploads/2016/03/googlemap/marker_garden.png"; var marker_garden = new google.maps.Marker({ position: kenrokuen, map: garden, icon: image_garden }); var image_tea = "//keitahirai.net/wp-content/uploads/2016/03/googlemap/marker_tea.png"; var marker_tea = new google.maps.Marker({ position: chayagai, map: tea, icon: image_tea }); var marker_spa = new google.maps.Marker({ position: yuwaku, map: spa }); // 吹き出し var ballon_garden = "金沢駅から<br>バスで約15分", ballon_tea = "ひがし茶屋街で<br>ホッと一息", ballon_spa = "金沢の奥座敷<br>" + '<a href="//yuwaku.gr.jp/" target="_blank">http://yuwaku.gr.jp/</a>'; var infowindow_garden = new google.maps.InfoWindow ({ content: ballon_garden }); infowindow_garden.open(garden, marker_garden); marker_garden.addListener('click', function() { infowindow_garden.open(garden, marker_garden); }); var infowindow_tea = new google.maps.InfoWindow ({ content: ballon_tea }); infowindow_tea.open(tea, marker_tea); marker_tea.addListener('click', function() { infowindow_tea.open(tea, marker_tea); }); var infowindow_spa = new google.maps.InfoWindow ({ content: ballon_spa }); infowindow_spa.open(spa, marker_spa); marker_spa.addListener('click', function() { infowindow_spa.open(spa, marker_spa); }); // ルート表示 var carRoot = [ {lat: 36.577572, lng: 136.649676}, {lat: 36.574835, lng: 136.653614}, {lat: 36.572127, lng: 136.655928}, {lat: 36.571024, lng: 136.654995}, {lat: 36.565182, lng: 136.653729}, {lat: 36.562365, lng: 136.653654}, {lat: 36.561809, lng: 136.659476}, {lat: 36.564911, lng: 136.661879}, {lat: 36.564940, lng: 136.661881} ]; var roadPath = new google.maps.Polyline({ path: carRoot, geodesic: true, strokeColor: '#008000', strokeOpacity: 0.5, strokeWeight: 5 }); roadPath.setMap(garden); // スタイル調整 var styles_garden = [ { stylers: [ {hue: "#00ccff"}, {saturation: 10} ] }, { featureType: "road", elementType: "geometry", stylers: [ {lightness: 100}, {visibility: "simplified"} ] }, { featureType: "road", elementType: "labels", stylers: [ {visibility: "off"} ] } ]; garden.setOptions({styles: styles_garden}); var styles_tea = [ { stylers: [ {hue: "#6e8347"}, {saturation: 10} ] }, { featureType: "road", elementType: "geometry", stylers: [ {lightness: 100}, {visibility: "simplified"} ] }, { featureType: "road", elementType: "labels", stylers: [ {visibility: "off"} ] } ]; tea.setOptions({styles: styles_tea}); } |
緯度経度の調べ方
※マーカー以外のどこをクリックしてもOK。
マウススクロールでの拡大縮小を禁止
1 | scrollwheel: false |
マーカーを独自アイコンにする
絶対パスでアイコンを指定し、マーカー用のメソッドを書くだけ。
1 2 3 4 5 6 | var image_garden = "//keitahirai.net/wp-content/uploads/2016/03/googlemap/marker_garden.png"; var marker_garden = new google.maps.Marker({ position: kenrokuen, map: garden, icon: image_garden }); |
デフォルトのマーカーにしたい場合は icon: 指定を削除すればOK。
アイコン素材はこちらのサイトから。
マーカー上部に吹き出しを追加
地図を表示したときとマーカーをクリックしたときに表示させるコードを書くだけ。
定義箇所にはhtmlも書けるので、heading / p などを書いて id / class を指定してテキストを装飾することも可能。
1 2 3 4 5 6 7 8 9 | var ballon_garden = "金沢駅から<br>バスで約15分"; var infowindow_garden = new google.maps.InfoWindow ({ content: ballon_garden }); infowindow_garden.open(garden, marker_garden); marker_garden.addListener('click', function() { infowindow_garden.open(garden, marker_garden); }); |
ルートを線で表す
緯度経度を配列で格納して線の色や幅を指定するだけ。
緯度経度を調べるのが少し手間。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var carRoot = [ {lat: 36.577572, lng: 136.649676}, {lat: 36.574835, lng: 136.653614}, {lat: 36.572127, lng: 136.655928}, {lat: 36.571024, lng: 136.654995}, {lat: 36.565182, lng: 136.653729}, {lat: 36.562365, lng: 136.653654}, {lat: 36.561809, lng: 136.659476}, {lat: 36.564911, lng: 136.661879}, {lat: 36.564940, lng: 136.661881} ]; var roadPath = new google.maps.Polyline({ path: carRoot, geodesic: true, strokeColor: '#008000', strokeOpacity: 0.5, strokeWeight: 5 }); roadPath.setMap(garden); |
スタイルを変更する
いくつかのプロパティが用意されていて、シンプルにしたりスタイリッシュにも出来る。
しかしやり過ぎは禁物なので色と彩度を変更する程度に留めておく。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var styles_garden = [ { stylers: [ {hue: "#00ccff"}, {saturation: 10} ] }, { featureType: "road", elementType: "geometry", stylers: [ {lightness: 100}, {visibility: "simplified"} ] }, { featureType: "road", elementType: "labels", stylers: [ {visibility: "off"} ] } ]; garden.setOptions({styles: styles_garden}); |
1ページに地図を複数表示させる
HTMLとCSSにはブロック要素とIDをそれぞれ用意し、JSには定義要素をそれぞれ用意する。
そして function initMap() 内で定義ごとにメソッドを書けばOK。
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 | var garden, tea, spa; function initMap() { var kenrokuen = {lat: 36.562348, lng: 136.662630}, chayagai = {lat: 36.572684, lng: 136.666474}, yuwaku= {lat: 36.488488, lng:136.755551}; garden = new google.maps.Map(document.getElementById('garden'), { zoom: 16, center: kenrokuen, scrollwheel: false }); tea = new google.maps.Map(document.getElementById('tea'), { zoom: 16, center: chayagai, scrollwheel: false }); spa = new google.maps.Map(document.getElementById('spa'), { zoom: 16, center: yuwaku, scrollwheel: false }); } |
公式API以外にも、デザインをガラっと変えるサービスも存在するようだ。
必要以上の装飾は逆効果なので注意。
コメントを投稿する