JSFiddle - React, Tailwind, and code Playground
by grant
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map"></div>
CSS
html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
JavaScript
var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";
var infowindow = new google.maps.InfoWindow();
//var center = [];
function initialize() {
// fit bounds 1 of 1
var bounds = new google.maps.LatLngBounds();
var mapProp = {
center: new google.maps.LatLng(52.4550, -3.3833), //LLANDRINDOD WELLS
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
// $.getJSON(json, function(json1) {
var markers = {
"universities": [
{
"title": "Aberystwyth University",
"web": "www.aber.ac.uk",
"phone": "+44 (0)1970 623 111",
"lat": 52.415524,
"lng": -4.063066},
{
"title": "Bangor University",
"web": "www.bangor.ac.uk",
"phone": "+44 (0)1248 351 151",
"lat": 53.229520,
"lng": -4.129987},
{
"title": "Cardiff Metropolitan University",
"web": "www.cardiffmet.ac.uk",
"phone": "+44 (0)2920 416 138",
"lat": 51.482708,
"lng": -3.165881},
{
"title": "limerick",
"web": "www.cardiffmet.ac.uk",
"phone": "+44 (0)2920 416 138",
"lat": 52.668018,
"lng": -8.630498
}
]
};
$.each(markers.universities, function (key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
// icon: icon,
title: data.title
});
});
//fit bounds step 2 of 3
bounds.extend(marker.position);
map.fitBounds(bounds);
map.panToBounds(bounds);
var details = data.web + ", " +...