こんな感じで白黒に設定していたのですが、
サイトをHTTPS化したら、表示されなくなってしまいました。
別に個人情報を取り扱うわけでもないので、基本的にはSSL対応しなくてもよかったのですが、
SEO的にも最近ではSSL対応基準というのが設定されているので、頃合いを見て導入してみました。
設定方法は、Xサーバを使っていたので、自動的に一括で変更してくれました。
XサーバSSL対応方法はこちらを参照ください。
今ではグーグルマップをサイト内に埋め込むには、APIキーが必要になりました。
Iframeでの埋め込みの場合は、特に問題なくそのまま埋め込めるようですので、
特にカスタマイズしない場合は、iframe を使えばいいかと思います。
今回は、カラーを変更したいので、APIを利用することにします。
取得はとっても簡単です。こちらにアクセスし、キーの取得を押してください。
次に、+create new projectを選び、任意のプロジェクト名を入れて、CREATE AND ENABLE APIをクリックしてください。
するとAPIコードが発行されますので、どこかにコピーしておいてください。
こちらにサンプルコートがありますので
こちらを使うだけで簡単に設置可能です。
|
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 |
<!DOCTYPE html> <html> <head> <title>Styled Maps - Night Mode</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, styles: [ {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html> |
lat: 40.674, lng: -73.945をご自分のマップの座標に変更してください。
そして、最後にあるYOUR_API_KEYを先ほど取得したAPIに変更してください。
こちらのスタイルのカラーを変更すると自分好みに地図のカラーリングを変更できますよ。
ただ実際にやってみると、意外に難しい。。。センスの無さを感じます。
そんな時におすすめなのが、カスタマイズ例です。
SNAZZY MAPS
https://snazzymaps.com/
お好きなデザインを選んで、styles: 以下を差し替えるだけです。
是非お試しください。
当ホームページには、こんな感じになりました～。