【JavaScript】Google Mapのマーカーとinfowindowのカスタマイズ方法

Google Mapのマーカーとinfowindowのカスタマイズを実装する機会があったのでメモしておく。

実装内容は、下記2つだ。

基本的にCSSは自由にコーディングしてもらってOKだ。

• google mapのマーカーをsvg画像に変更
• google mapのマーカーをクリックした時にカスタマイズした情報ウィンドウを表示

HTML

<div id="googleMap"></div>

JavaScript

<script src="https://maps.googleapis.com/maps/api/js?key=「ここに取得したAPI Keyを記述」&callback=initMap" async defer></script>
	<script>
		function initMap() {
			var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
			var map = new google.maps.Map(document.getElementById('googleMap'), {
				zoom: 15,
				center: latlng
			});
			var marker = new google.maps.Marker({
				position: latlng, //マーカーの位置（必須）
				map: map, //マーカーを表示する地図
				icon: 'img/icon_pin.svg' //マーカー画像のURL
			});
                        //情報ウィンドウの中に組み込みたいタグ
			var contentString = '<div id="box" class="box">'+
          '<h1 class="title">タイトル</h1>'+
          '<div class="contents">'+
          '<p class="text">テキスト</p>'+
          '<div class="btn"><a href="#">リンク</a></div>'+
          '</div>'+
          '</div>';
　　　　　　　　//情報ウィンドウ
			var infoWindow = new google.maps.InfoWindow({
				content: contentString, //情報ウィンドウのテキスト
				pixelOffset: new google.maps.Size(0,200)//情報ウィンドウの表示位置
			});
			google.maps.event.addListener(marker, 'click', function() { //マーカークリック時の動作
				infoWindow.open(map, marker); //情報ウィンドウを開く
			});
		}
	</script>