JSON Array is not fetched in Google Maps

Question

Am a begginer in Javascript and am trying to Import data into Maps , I have a Json Array list from my URL . but the Longitude and Latitude is not fetched and also i tried to print them in Console but nothing shows.

This is my Json data :

[{"Id":1,"Country":"Uganda","District":"kampala","SubCounty":"Hima","EpidemicName":"cholera","PatientName":"Michael","PatientResidenceArea":"Muhokya","Latitude":0.3249832,"Longitude":32.5753133,"HealthFacilityName":"Mulago","HealthOfficerName":"Fauziya"},{"Id":2,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":3,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":4,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":5,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":6,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":7,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":8,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":9,"Country":"Uganda","District":"Jinja","SubCounty":"kashaali","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":10,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"},{"Id":11,"Country":"Uganda","District":"Mbarara","SubCounty":"Mile","EpidemicName":"Cholera","PatientName":"Musa","PatientResidenceArea":"Kabalagala","Latitude":0.635364,"Longitude":0.354789,"HealthFacilityName":"Kiruddu","HealthOfficerName":"Mbabaali"}]

And below is my code :

<body>
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 2,
                center: new google.maps.LatLng(2.8, -187.3),
                mapTypeId: 'terrain'
            });

            // Create a <script> tag and set the USGS URL as the source.
            var script = document.createElement('script');
            // This example uses a local copy of the GeoJSON stored at
            // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
            script.src = 'http://localhost:82/Mobile/Fetch.aspx?DataFormat=Details';
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        // Loop through the results array and place a marker for each
        // set of coordinates.
        window.eqfeed_callback = function (results) {
            for (var i = 0; i < results.length; i++) {
                var coords = results.features[i].geometry.coordinates;
                var Ltd = results.Latitude[i];
                var Lgd = results.Longitude[i];
                console.log("Latitude : "+ Ltd+" Longitude : "+ Lgd);
                var latLng = new google.maps.LatLng(Ltd, Lgd);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map
                });
            }
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYol0DZtLxlMaLW6S7QZIQk48Do18cm6A&callback=initMap">
    </script>
  </body>

EDIT:

This is my update But still don't know why its not bringing points even when i try to print the points they don't show in the console why?

var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 2,
                center: new google.maps.LatLng(2.8, -187.3),
                mapTypeId: 'terrain'
            });

            // Create a <script> tag and set the USGS URL as the source.
            var script = document.createElement('script');
            // This example uses a local copy of the GeoJSON stored at
            // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
            script.src = 'http://192.168.0.6:72/Mobile/Fetch.aspx?DataFormat=Details';
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        // Loop through the results array and place a marker for each
        // set of coordinates.
        window.eqfeed_callback = function (results) {
            for (var i = 0; i < results.length; i++) {

                var Ltd = results[i].Latitude;
                var Lgd = results[i].Longitude;
                console.log("Latitude : " + Ltd + " Longitude : " + Lgd);

                alert(""+ Ltd);
                var latLng = new google.maps.LatLng(Ltd, Lgd);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    label: results[i].EpidemicName
                });
            }
        }

Jason Smith · Accepted Answer · 2017-08-30 11:39:36Z

1

The window.eqfeed_callback function has some errors. It should look like this:

window.eqfeed_callback = function (results) {
    for (var i = 0; i < results.length; i++) {
        var Ltd = results[i].Latitude;
        var Lgd = results[i].Longitude;
        console.log("Latitude : "+ Ltd+" Longitude : "+ Lgd);
        var latLng = new google.maps.LatLng(Ltd, Lgd);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
    }
}

Notice that the coords variable has been removed because it is unused. Also, the array index must come after the name of the array, rather than at the end of the expression, such as in var Ltd = results[i].Latitude; rather than var Ltd = results.Latitude[i];

Also, the script loaded by the initMap function must call the eqfeed_callback function when it loads. This can be done by loading the JSON via jQuery, like this:

$.getJSON('http://192.168.0.6:72/Mobile/Fetch.aspx?DataForma‌t=Details', eqfeed_callback);

EDIT:

To add a title to each marker, do something like this:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    label: results[i].EpidemicName
});

Please refer to the Google Maps API reference for more information

edited Aug 30, 2017 at 11:39

answered Aug 29, 2017 at 14:38

Jason Smith

1,2098 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Lutaaya Huzaifah Idris Over a year ago

what if , i want to EpidemicName, as my marker on each point what can i do. EpidemicName is also an Object in Json.

Jason Smith Over a year ago

@LutaayaHuzaifahIdris I updated my answer with this information.

mswalehe Over a year ago

@JasonSmith, how can i load the initMap function which must call the eqfeed_callback function when it loads.

Jason Smith Over a year ago

@mswalehe initMap is already called when the Google Maps script loads. I edited my answer with information on how to call eqfeed_callback after your results load.

mswalehe Over a year ago

but still the map is not showing results, i changed my results, checkout my Edit in the post and see

|

Collectives™ on Stack Overflow

JSON Array is not fetched in Google Maps

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related