Adding Multiple Markers to Google Maps using json file

Question

I have a map and a JSON file containing information on Restaurants. I need to add markers to the map for 20 of the restaurants from the JSON file, but I just can't get the map to load with the markers on. I don't think i'm retrieving the data from the JSON file correctly. A point in the right direction would be greatly appreciated.

Here is my code:

  var map;
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(55.9753905, -1.6236163),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

       map = new 
         google.maps.Map(document.getElementById("EstablishmentCollection"),
           mapOptions);
           $.getJSON("'FHRS_json.json'", function(json1) {
           $.each(json1, function(key, data) {
               var latLng = new google.maps.LatLng(data.lat, data.lng);
               // Creating a marker and putting it on the map
               var marker = new google.maps.Marker({
                   position: latLng,
                   title: data.BusinessName
               });
               marker.setMap(map);
               });
            });

And then this is sample of the start of the JSON file. There's loads of restaurants so I wont post it all.

 {
   "FHRSEstablishment": {
   "-xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
   "Header": {
   "ExtractDate": "2018-02-03",
   "ItemCount": "2369",
   "ReturnCode": "Success"
  },
"EstablishmentCollection": {
      "EstablishmentDetail": [
        {
          "FHRSID": "1011573",
          "LocalAuthorityBusinessID": "17/00395/MIXED",
          "BusinessName": "#Central",
          "BusinessType": "Pub/bar/nightclub",
          "BusinessTypeID": "7843",
          "AddressLine1": "15 Marlborough Crescent",
          "AddressLine2": "Newcastle upon Tyne",
          "PostCode": "NE1 4EE",
          "RatingValue": "AwaitingInspection",
          "RatingKey": "fhrs_awaitinginspection_en-GB",
          "RatingDate": { "-xsi:nil": "true" },
          "LocalAuthorityCode": "416",
          "LocalAuthorityName": "Newcastle Upon Tyne",
          "LocalAuthorityWebSite": "http://www.newcastle.gov.uk/",
          "LocalAuthorityEmailAddress": "psr@newcastle.gov.uk",
          "SchemeType": "FHRS",
          "NewRatingPending": "False",
          "Geocode": {
            "Longitude": "-1.62244200000000",
            "Latitude": "54.96785900000000"
          }
        },

Answer 1

I think the main problem you're having is you need to parse the floats. Currently they are just strings. You can create a marker with the following function. Just pass the establishment as an object into the function and it will create the marker for you:

   function createMarker(obj) {
        const LatLng = new google.maps.LatLng(
            parseFloat(obj.geocode.Latitude),
            parseFloat(obj.gecode.Longitude)
        );    marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: obj.BusinessName
        });
    }

Answer 2

Try changing the loop to:

$.each(json1.EstablishmentCollection.EstablishmentDetail, function(key, data) {

  var coords = data.Geocode;
  //look in browser console for errors and/or proper lat/lng object
  console.log(coords)


  var latLng = new google.maps.LatLng(+coords.Latitude, +coords.Longitude);
  // Creating a marker and putting it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    title: data.BusinessName
  });
  marker.setMap(map);
});

Answer 3

Change your loop processing to process over the array in the JSON data:

$.each(jsonData.EstablishmentCollection.EstablishmentDetail, function(key, data) {
  var latLng = new google.maps.LatLng(data.Geocode.Latitude, data.Geocode.Longitude);
  // Creating a marker and putting it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    title: data.BusinessName
  });
  marker.setMap(googleMap);
});

proof of concept fiddle

code snippet:

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="googleMap"></div> <script> function initialize() { var center = new google.maps.LatLng(54.9753905, -1.6236163); var mapCanvas = document.getElementById("googleMap"); var mapOptions = { center: center, zoom: 12 }; var googleMap = new google.maps.Map(mapCanvas, mapOptions); $.each(jsonData.EstablishmentCollection.EstablishmentDetail, function(key, data) { var latLng = new google.maps.LatLng(data.Geocode.Latitude, data.Geocode.Longitude); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, title: data.BusinessName }); marker.setMap(googleMap); }); } </script> <script> var jsonData = { "EstablishmentCollection": { "EstablishmentDetail": [{ "FHRSID": "1011573", "LocalAuthorityBusinessID": "17/00395/MIXED", "BusinessName": "#Central", "BusinessType": "Pub/bar/nightclub", "BusinessTypeID": "7843", "AddressLine1": "15 Marlborough Crescent", "AddressLine2": "Newcastle upon Tyne", "PostCode": "NE1 4EE", "RatingValue": "AwaitingInspection", "RatingKey": "fhrs_awaitinginspection_en-GB", "RatingDate": { "-xsi:nil": "true" }, "LocalAuthorityCode": "416", "LocalAuthorityName": "Newcastle Upon Tyne", "LocalAuthorityWebSite": "http://www.newcastle.gov.uk/", "LocalAuthorityEmailAddress": "psr@newcastle.gov.uk", "SchemeType": "FHRS", "NewRatingPending": "False", "Geocode": { "Longitude": "-1.62244200000000", "Latitude": "54.96785900000000" } }] } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script>