JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<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;
}
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var myOptions = {
center: new google.maps.LatLng(53.3242381, -6.3857877),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
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
});
map.setCenter(marker.getPosition())
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));
}
}