JSFiddle - React, Tailwind, and code Playground
HTML
<table hidden>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDAmDz0Mv9VcspygtA3rumHP4d2PR3H7wM"></script>
<thead>
<th>County</th>
<th>Lat</th>
<th>Lon</th>
</thead>
<tbody>
<tr>
<td>Wroclawskie</td>
<td>51.0396704</td>
<td>16.9454582</td>
</tr>
<tr>
<td>Germany</td>
<td>51.07675</td>
<td>13.6325032</td>
</tr>
<tr>
<td>France</td>
<td>50.7969446</td>
<td>2.6248715</td>
</tr>
<tr>
<td>Britain</td>
<td>52.6360565</td>
<td>-1.2011397</td>
</tr>
</tbody>
</table>
<div id="map" style="width: 500px; height: 500px;"></div>
JavaScript
var table = $("table tbody");
function attainLocation() {
var tableLocs = [];
table.find('tr').each(function(i) {
var $tds = $(this).find('td'),
siteName = $tds.eq(0).text(),
Lat = $tds.eq(1).text();
Lon = $tds.eq(2).text();
var obj = {
'sitename': siteName,
'lat': Lat,
'lon': Lon
};
tableLocs.push(obj);
});
return tableLocs;
}
function initialize() {
window.map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var locations = attainLocation();
setMarkers(map, locations)
}
function setMarkers(map, locations) {
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i].sitename
var lat = locations[i].lat
var long = locations[i].lon
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map,
title: loan,
position: latlngset
});
bounds.extend(marker.position);
var content = "Site: " + loan + '</h3>'
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content, infowindow));
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(3);
google.maps.event.removeListener(listener);
});
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +...