javascript - Load data from JSON file into map markers in Google Maps - Stack Overflow

admin管理员组

文章数量:1244384

I've got the following JSON file:

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

And I'm trying to load the data from this file into my google maps script to produce some map markers with respective info windows. Here's my script:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";

function initialize() {

  var mapProp = {
  center:   new google.maps.LatLng(52.4550,-3.3833), //LLANDRINDOD WELLS
   zoom:        7,
   mapTypeId:  google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  $.getJSON(json, function(json1) {

$.each(json1, 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);

});

 });

}

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

But the data isn't loading (i.e. the map markers and infowindows aren't showing)? Are there any problems with my JSON format. I've looked at previous solutions from Stacked such as this one but they're not loading. Any ideas?

I've got the following JSON file:

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

And I'm trying to load the data from this file into my google maps script to produce some map markers with respective info windows. Here's my script:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";

function initialize() {

  var mapProp = {
  center:   new google.maps.LatLng(52.4550,-3.3833), //LLANDRINDOD WELLS
   zoom:        7,
   mapTypeId:  google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  $.getJSON(json, function(json1) {

$.each(json1, 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);

});

 });

}

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

But the data isn't loading (i.e. the map markers and infowindows aren't showing)? Are there any problems with my JSON format. I've looked at previous solutions from Stacked such as this one but they're not loading. Any ideas?

• javascript
• json
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 12:34 CommunityBot 111 silver badge asked Feb 19, 2015 at 12:15 WebDevDannoWebDevDanno 1,12222 gold badges2222 silver badges5050 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

function initialize() {

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

    //    });

  });

}

function bindInfoWindow(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
}

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

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

本文标签： javascriptLoad data from JSON file into map markers in Google MapsStack Overflow