こんな感じで白黒に設定していたのですが、
サイトを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: 以下を差し替えるだけです。
是非お試しください。
当ホームページには、こんな感じになりました～。
アップデートやプラグインの不調によりいつ飛んでもしまっても大丈夫なように
バックアップをとるのは知ってるけど、面倒くさいですよね。
自動的に決めた時間にバックアップをとってくれるプラグインがありましたので、
ご紹介いたします。
その名は、BackWPupです。早速プラグインを検索して、
BackWPupをインストールしてください。
ちなみにバックアップは、ファイルのバックアップとデータベース＆プラグインのバックアップの２種類に分けて行います。
理由は、ファイルの方が重たいので、こちらは１週間おきにバックアップ、データベースとプラグインは軽いので、
毎日バックアップを取るようにします。
一般タブからジョブの名前を入れる。ファイルバックアップと入力する。
それ以外はそのままでOKです。
ジョブのスケジュールは、 WordPress の cronを選ぶ。
そしてスケジューラーは毎週日曜の夜中３時を選ぶ。
こちらはいつでも見れるのでわからなくなったら、こちらでバックアップ先を確認しましょう。
ジョブに戻ると保存されていることが確認できます。
一般タブからジョブの名前を入れる。次はデータベースバックアップと入力する。
バックアップファイルの保存方法はフォルダーへバックアップにチェックを付ける。
最後に変更を保存ボタンを押して完了になります。
とっても簡単ですし、これさえやっておけばいざというときとっても安心です。
是非是非。