JSFiddle - React, Tailwind, and code Playground

by tomjleo

HTML

<h1>
Which House is it?!
</h1>
<p>
Click on a roofs to label and number them
</p>
<button id="clear">Clear</button>
<hr>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  width: 600px;
  height: 500px;
}

JavaScript

var lat = 42.4000767,
    lon = -71.1708789,
    map, marker,
    count = 1, labels;
function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: lat, lng: lon},
    zoom: 19,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    draggableCursor: 'crosshair'
  });

  marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    draggable: false,
  });
  
  labels = [];
  google.maps.event.addListener(map, 'click', map_clicked);
}

function map_clicked(e) {
	_info = new google.maps.InfoWindow({
  	content: '' + count,
    position: e.latLng
  });
  labels.push(_info);
  _info.open(map);
  count +=1;
}

document.getElementById('clear').addEventListener('click', function(e) {
	for (var i=0; i<labels.length; i++) {
  	labels[i].setMap(null);
  }
  labels = [];
  count = 1;
})