Load Data From Json File Into Map Markers In Google Maps

I've got the following JSON file: { 'universities' : [ [ 'title': 'Aberystwyth University', 'web': 'www.aber.ac.uk', 'phone': '+44 (0)1970 623 111',

Solution 1:

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();

functioninitialize() {

  var mapProp = {
    center: new google.maps.LatLng(52.4550, -3.3833), //LLANDRINDOD WELLSzoom: 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);

    //    });

  });

}

functionbindInfoWindow(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
}

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

Solution 2:

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}]}