JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="https://maps.google.com/maps/api/js?"></script>
<div id="map"></div>
CSS
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var wiki_page_list = [
"List_of_airports_in_Alberta",
"List_of_airports_in_British_Columbia",
"List_of_airports_in_Manitoba",
"List_of_airports_in_New_Brunswick",
"List_of_airports_in_Newfoundland_and_Labrador",
"List_of_airports_in_Nova_Scotia",
"List_of_airports_in_the_Northwest_Territories",
"List_of_airports_in_Nunavut",
"List_of_airports_in_Ontario",
"List_of_airports_in_Prince_Edward_Island",
"List_of_airports_in_Quebec",
"List_of_airports_in_Saskatchewan",
"List_of_airports_in_Yukon",
];
var aerodromes = [];
var deferreds = [];
var map;
function main()
{
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 45.612, lng: -75.196},
mapTypeId: 'terrain'
});
initCoords();
$.when.apply(null, deferreds).done(function() {
initMap();
});
}
function initCoords()
{
$.each(wiki_page_list, function( key, value ) {
full_url = "https://en.wikipedia.org/w/api.php?action=parse§ion=1&prop=text&format=json&callback=?&page=" + value,
deferreds.push($.ajax({
type: "GET",
url: full_url,
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data, textStatus, jqXHR) {
html = $( data['parse']['text']['*'] );
eles = html.find(".geo");
coords = $.each(eles, function( key, element ) {
coords = element.innerText.split(';');
lat_long = {lat : parseFloat(coords[0]), lng: parseFloat(coords[1])};
aerodromes.push(lat_long);
});
}
}));
});
}
function initMap()
{
for (var idx in aerodromes) {
var exclude = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.3,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.25,
map: map,
center: aerodromes[idx],
radius: 9000 // 9km
});
}
}
main();