Googleマップをおしゃれにする
Googleマップをおしゃれにしてくださいと言われたので、色々調べてやってみました。２回目以降はスムーズにできるよう参考にしたサイトやメモをまとめます。
Google APIキーの発行について
Googleマップをカスタムして設置するにはAPIキーが必要です。
こちらの「GET STARTED」より登録します。
本人確認のためにクレジットカード登録が必要ですが、突然有料にならない、無償の枠内で使用することも可能とのこと。
APIキー発行後にAPIの制限など色々設定できます。
タグの埋め込み
公式サイトに書いてあるコードです。cssの指定はあんまり重要じゃないと思ったので割愛しました。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
<div id="map"></div>
/* 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;
}
<!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<body>
<!-- MAPを表示したい場所に設置-->
<div id="map"></div>
<!-- /body直前に設置-->
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
// 座標を変える
center: {lat: -34.397, lng: 150.644},
// 縮尺を調整
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
座標を変える
Googleマップ上で表示したい住所を検索して座標を調べると楽です。
調べた座標はcenter: { lat: , lng: }にそれぞれはめ込んでください。
地図を拡大/縮小して表示
zoomの後ろの数字を変更します。拡大したい場合は数字を大きく、確証したい場合は数字を小さくしてください。
Googleマップの色をカスタマイズする
こちらのサイトからデザインを探しました。
最初パッと見た感じで選んでしまったので、水路が赤くなってしまい、なんでやねんとなったので、デフォルトとじっくり見比べて選びましょう。
設置方法は、こちらを参考にしました。すごく丁寧に説明されていたので、よく理解できました。ありがとうございます、感謝！
zoomの後に
styles:を追記し、SNAZZYMAPSのコードを貼り付ける感じです。
Googleマップにピン/マーカーを表示する
色々試してうまく表示されなかったのですが、こちらを参考にしたところ表示されました！
ピン/マーカーの画像を変えたい
画像変更はこちらを参考にしました。
以下、今回の学びです。
- ピンの画像にボックスシャドウ（角度90度）をつけると、立体感が出ます。
- ピンの末端は本家のように内側にへっこませると、よりGoogleマップに馴染むんじゃないかなと思います。
- 拡張子はSVGにすると美しさが増します。（そうするとサイズを指定しないといけないのですが、どうやってもうまくいかず先輩に教えてもらいました。まだ理解が追いついていないので後日まとめます。心からJavaScriptを勉強しないといけないなと感じました。）
