【マップ】Googleマップのマーカーをオリジナル画像に変更

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
	});
}

タイトルとURLをコピーしました