JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="side">
<ol id="list"></ol>
</div>
CSS
html, body {
height: 98%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width:70%;
float:left;
}
#side{
height:100%;
width:25%;
float:left;
}
JavaScript
var map;
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -27.2341789,
lng: 134.0797745
},
zoom: 4
});
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var bounds = map.getBounds();
console.log(bounds)
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var len = 100,
i = 0,
mkrs = [];
for (i; i < len; i++) {
var pnt = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
var marker = new google.maps.Marker({
position: pnt,
map: map,
title: "Marker " + i
});
var myli = document.createElement("li");
myli.innerHTML = marker.title;
document.getElementById("list").appendChild(myli);
bounds.extend(pnt);
mkrs.push(marker);
}
map.fitBounds(bounds);
google.maps.event.addListener(map, 'bounds_changed', function() {
document.getElementById("list").innerHTML = "";
var mklen = mkrs.length,
a = 0,
bnds = map.getBounds();
for (a; a < mklen; a++) {
var themk = mkrs[a];
if (bnds.contains(themk.getPosition())) {
var myli = document.createElement("li");
myli.innerHTML = themk.title;
document.getElementById("list").appendChild(myli);
}
}
});
});