循环遍历 JSON 以在 Google 地图上放置标记

Question

I am trying to generate a google map using jQuery and javascript. The values for latitude and longitude are stored in a JSON file. When the user clicks the state name the needs to get generated.

The problem with my code is that a graph is getting genrated for only index[0] . My for loop is not working appropriately. A graph for New York is generated but it points to Nepal rather than New York. Here is my code:

for (var i in data.universitylist) {
    var lat = data.universitylist[i].lat;
    var lng = data.universitylist[i].lng;

    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: lat,
            lng: lng
        },
        scrollwheel: false,
        zoom: 8
    });
    var marker = new google.maps.Marker({
        map: map,
        position: {
            lat: lat,
            lng: lng
        },
        title: 'Hello World!'
    });
};

The JSON file:

var data = {
    "universitylist": [{
            "Name": "Columbia University",
            "City": "New York",
            "State": "NY",
            "lat": 40.7127,
            "lng": 74.0059
        },{
            "Name": "Stanford University",
            "City": "Stanford,",
            "State": "CA",
            "lat": 37.0000,
            "lng": 120.0000
        },{
            "Name": "Duke University",
            "City": "Durham",
            "State": "NC",
            "lat": 35.5000,
            "lng": 80.0000
        },{
            "Name": "University of Pennsylvania",
            "City": "Philadelphia",
            "State": "PA",
            "lat": 41.0000,
            "lng": 77.5000
        },{
            "Name": "Northcentral University",
            "City": "Prescott Valley",
            "State": "AZ",
            "lat": 34.0000,
            "lng": 112.0000
        },{
            "Name": "Johns Hopkins University",
            "City": "Baltimore",
            "State": "MD",
            "lat": 39.0000,
            "lng": 76.7000
        }, {
            "Name": "Northwestern University",
            "City": "Evanston",
            "State": "IL",
            "lat": 40.0000,
            "lng": 89.0000
        },{
            "Name": "Rice University",
            "City": "Houston",
            "State": "TX",
            "lat": 31.0000,
            "lng": 100.0000
        },{
            "Name": "University of Southern California",
            "City": "Los Angeles",
            "State": "CA",
            "lat": 37.0000,
            "lng": 120.0000
        },{
            "Name": "Georgia Institute of Technology",
            "City": "Atlanta",
            "State": "GA",
            "lat": 32.9605,
            "lng": 83.1132
        }
    ]
};

Answer 1

Your problem is you are re-generating the map for every iteration within the for loop.

Try taking it outside, and change your for in to a for :-

 var data = { "universitylist": [{ "Name": "Columbia University", "City": "New York", "State": "NY", "lat": 40.7127, "lng": 74.0059 }, { "Name": "Stanford University", "City": "Stanford,", "State": "CA", "lat": 37.0000, "lng": 120.0000 }, { "Name": "Duke University", "City": "Durham", "State": "NC", "lat": 35.5000, "lng": 80.0000 }, { "Name": "University of Pennsylvania", "City": "Philadelphia", "State": "PA", "lat": 41.0000, "lng": 77.5000 }, { "Name": "Northcentral University", "City": "Prescott Valley", "State": "AZ", "lat": 34.0000, "lng": 112.0000 }, { "Name": "Johns Hopkins University", "City": "Baltimore", "State": "MD", "lat": 39.0000, "lng": 76.7000 }, { "Name": "Northwestern University", "City": "Evanston", "State": "IL", "lat": 40.0000, "lng": 89.0000 }, { "Name": "Rice University", "City": "Houston", "State": "TX", "lat": 31.0000, "lng": 100.0000 }, { "Name": "University of Southern California", "City": "Los Angeles", "State": "CA", "lat": 37.0000, "lng": 120.0000 }, { "Name": "Georgia Institute of Technology", "City": "Atlanta", "State": "GA", "lat": 32.9605, "lng": 83.1132 }] }; var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 33, lng: 100 }, scrollwheel: false, zoom: 3 }); for (var i = 0; i < data.universitylist.length; i++) { var lat = data.universitylist[i].lat; var lng = data.universitylist[i].lng; console.log(i, lat, lng); var marker = new google.maps.Marker({ map: map, position: { lat: lat, lng: lng }, title: 'Hello World!' }); };

 #map { height: 400px; }

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>