Load data from JSON file into map markers in Google Maps

Question

I\'ve got the following JSON file:

{
   \"universities\" : [
    [
        \"title\": \"Aberystwyth University\",
        \"web\": \"www.aber.ac.uk\",
        \"         


        

Answer 1

JSON is invalid - see correction

{
    "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",
            "website": "www.cardiffmet.ac.uk",
            "phone": "+44 (0)2920 416 138", 
            "lat": 51.482708,
            "lng": -3.165881
        }
    ]
}

Answer 2

There are three issues with the posted code:

1. the universities array should be an array of javascript objects "{}" not javascript arrays "[]".
2. you need to process the universities array in the $.each
3. the "web" property of your javascript object is incorrect, the code expects "website"

working fiddle (without the JSON fetch)

working code snippet:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";
var infowindow = new google.maps.InfoWindow();

function initialize() {

  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 json1 = {
    "universities": [{
        "title": "Aberystwyth University",
        "website": "www.aber.ac.uk",
        "phone": "+44 (0)1970 623 111",
        "lat": 52.415524,
        "lng": -4.063066
      },
      {
        "title": "Bangor University",
        "website": "www.bangor.ac.uk",
        "phone": "+44 (0)1248 351 151",
        "lat": 53.229520,
        "lng": -4.129987
      },
      {
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "+44 (0)2920 416 138",
        "lat": 51.482708,
        "lng": -3.165881
      }
    ]
  };
  $.each(json1.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
    });

    var details = data.website + ", " + data.phone + ".";

    bindInfoWindow(marker, map, infowindow, details);

    //    });

  });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>