Incorporating multiple markers into Google Maps with the help of a JSON file

Question

Incorporating multiple markers into Google Maps with the help of a JSON file

I am struggling to display markers on a map for 20 restaurants from a JSON file. It seems like I may not be retrieving the data correctly. Any help or guidance in the right direction would be greatly appreciated.

My current code is as follows:

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

Here is a snippet of the beginning of the JSON file which contains information about various restaurants.

{
   "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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12626160527c7765717361667e773c75797b">[email protected]</a>",
          "SchemeType": "FHRS",
          "NewRatingPending": "False",
          "Geocode": {
            "Longitude": "-1.62244200000000",
            "Latitude": "54.96785900000000"
          }
        },

javascript json google-maps

Answer 1

Answer №1

It appears that the main issue you are encountering is the need to convert the floats from strings. By implementing the following function, you can create a marker easily by passing the establishment as an object:

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

Answer 2

It appears that the main issue you are encountering is the need to convert the floats from strings. By implementing the following function, you can create a marker easily by passing the establishment as an object:

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

Answer 3

Answer №2

Consider updating the loop to this:

$.each(json1.EstablishmentCollection.EstablishmentDetail, function(index, item) {

  var location = item.Geocode;
  //check browser console for any errors and ensure correct lat/lng object
  console.log(location)


  var coordinates = new google.maps.LatLng(+location.Latitude, +location.Longitude);
  // Creating a marker and adding it to the map
  var newMarker = new google.maps.Marker({
    position: coordinates,
    title: item.BusinessName
  });
  newMarker.setMap(map);
});

Answer 4

Consider updating the loop to this:

$.each(json1.EstablishmentCollection.EstablishmentDetail, function(index, item) {

  var location = item.Geocode;
  //check browser console for any errors and ensure correct lat/lng object
  console.log(location)


  var coordinates = new google.maps.LatLng(+location.Latitude, +location.Longitude);
  // Creating a marker and adding it to the map
  var newMarker = new google.maps.Marker({
    position: coordinates,
    title: item.BusinessName
  });
  newMarker.setMap(map);
});

Answer 5

Answer №3

Revamp your loop processing to iterate through the array within 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 placing it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    title: data.BusinessName
  });
  marker.setMap(googleMap);
});

view demonstration fiddle

snippet of code:

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 placing 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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9babb89a7acbeaaa8babda5ace7aea6bfe7bca2">[email protected]</a>",
        "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>

Answer 6

Revamp your loop processing to iterate through the array within 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 placing it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    title: data.BusinessName
  });
  marker.setMap(googleMap);
});

view demonstration fiddle

snippet of code:

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 placing 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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9babb89a7acbeaaa8babda5ace7aea6bfe7bca2">[email protected]</a>",
        "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>

Incorporating multiple markers into Google Maps with the help of a JSON file

Answer №1

Answer №2

Answer №3

Similar questions

How can you add draggable functionality to a Bootstrap dropdown menu?

PHP not displaying line breaks from JavaScript textarea

Switching from PHP to JavaScript before returning to PHP to establish and manage sessions

Guide to specifying optional JSON fields in Golang structures?

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

Updating the state of an array containing objects within an array of objects in React

What is the best method for integrating JavaScript into my Express.js application that is also utilizing Socket.IO?

I currently have a set of 6 popovers that all open simultaneously, but I am looking to make them open sequentially, one after

What is the most efficient method for transforming an index into a column number that resembles that of Excel using a functional approach?

Disabling the loading of JavaScript on a Magento website

Terminate the rethinkdb data stream

A guide to accessing a specific worksheet on a Sharepoint Excel spreadsheet using Python

Customize the CSS for the column containers in Material-UI's DataGrid with the

Customizing an image with personalized text and then sending it to a server using a combination of javascript and

Is it possible to use null and Infinity interchangeably in JavaScript?

Calculating the height of the browser menubar, toolbar, navigation bar, and bookmarks can be easily achieved using jQuery or JavaScript

I could use some help understanding how to identify the parent file so I can elevate a state

Position a div element after another using the :after pseudo-element

A program that saves numerous data from a JSON dictionary into an array

DailyCodingChallenge: Discover two elements in an array that add up to a specified value