Google Map Javascript APIを使いMapを表示し、ピンを立てる方法

こんにちは、ジャムです。

最近、Google Map APIを使ってGoogle Mapの描画、そのMAP上にピン、情報ウィンドウを表示する実装を経験したので、その内容をまとめておきます。

この記事の対象読者

WebサイトにGoogleMapを表示したい。

表示したGoogleMapにピンやウィンドウを表示したい。

javascriptやJQueryをある程度使える。

実装結果

Google Map javascript ApiはKeyがなくても、実装は可能です。見た目が変わりますが、開発中や検討では問題ないかと思います。

API Key有り

API Key無し

ソースコード

ディレクトリとファイル構成は以下のようになっています。

DocumentRoot
∟ index.html
∟ style.css
∟ index.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <!-- api key なし-->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async></script>
    <!-- api key あり-->
    <!--<script src="https://maps.googleapis.com/maps/api/js?key=***************&callback=initMap" async></script>-->
  </body>
</html>

style.css

#map {
    height: 80%;
}

html,
body {
    height: 110%;
    margin: 0;
    padding: 10px 100px;
}

index.js

let map;
let marker = [];
let infoWindow = [];
const center = {
	lat: 35.68649037419494,
	lng: 139.76793429553206
}

const markers = [
	{ lat: 35.72244653333609, lng: 139.79603437493867 },
	{ lat: 35.68209778249919, lng: 139.6998433114416}
];

function initMap()
{
	map = new google.maps.Map(document.getElementById("map"), {
		center: center,
		zoom: 12,
	});
	makeMarker();
}
function makeMarker() {
	for (let i = 0; i < markers.length; i++) {
		markerLatLng = new google.maps.LatLng({ lat: markers[i]['lat'], lng: markers[i]['lng'] });
		marker[i] = new google.maps.Marker({
			position: markerLatLng,
			map: map
		});

		const content =  '<div id="content">' +
		'<div id="siteNotice">' +
		"</div>" +
		'<h1 id="firstHeading" class="firstHeading">Info</h1>' +
		'<div id="bodyContent">' +
		"<p>window</p>" +
		"</div>" +
		"</div>";
	
		infoWindow[i] = new google.maps.InfoWindow({
			content: content
		});
	
		markerEvent(i);
	}
}

function markerEvent(i)
{
	marker[i].addListener('click', function ()
	{
		infoWindow.forEach( function (val,index,ar)
		{
			val.close();
		});
		infoWindow[i].open(map, marker[i]);
	});
}

解説

1.GoogleのCDNを読み込み

inde.htmlファイルの11行目「<script src=”https://maps.googleapis.com/maps/api/js?callback=initMap” async></script>」この記述で、google mapの描画に必要なcdnを読み込みます。「callback=initMap」でコールバック関数としては、index.jsの14行目のinitMap関数を実行します。

2.Mapを描画する

ndex.htmlの9行目のid「map」要素に対して、index.jsの16〜19行目の「new google.maps.Map」でmapを描画します。

引数として、「center」と「zoom」を指定します。centerは緯度・経度、zoomは拡大率になります。

3.ピンを描画する

赤いピンの描画は、まずindex.jsの9〜12行目でピンの位置の緯度・経度を準備します。そして、index.jsの22行目の「makeMarker」メソッドで、ピンを立てていきます。

4.情報ウィンドウを表示する

index.jsの39行目で、ウィンドの生成、43行目でピンをクリックした際のイベントを追加しています。