Google Maps APIを利用してWebサイトに地図を埋め込み、オリジナル画像のマーカーを配置します。
Google Maps APIで取得したAPIキーを指定してGoogle Maps APIを読み込みます。async属性を指定して非同期で読み込みます。また、読み込みのURLのパラメーターにcallback=initMapを指定して関数initMapを呼び出します。
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap" async defer></script>
htmlのコードは下記になります。
今回は空のfigureタグ内にGoogleマップを表示します。figureタグにはid=”maps”を付与します。
<figure id="maps"></figure>
続いてCSSのコードです。
Googleマップを表示する領域にはheightの指定が必要です。今回は高さ500pxに設定します。また、width: 100%を指定してウィンドウサイズに合わせて地図の幅を可変にします。
#maps {
width: 100%;
max-width: 700px;
height: 500px;
margin: 0 auto;
padding: 0;
}
最後にjavascriptのコードです。
今回はドコモタワーの緯度と経度を指定して表示します。マーカーは地図上に複数配置可能です。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng
});
var marker = new google.maps.Marker({
position: latlng, //マーカーの位置(必須)
map: map, //マーカーを表示する地図
icon: 'icon_blue.png' //マーカー画像のURL
});
}