こんにちは、ジャムです。
最近、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行目でピンをクリックした際のイベントを追加しています。