Javascript 将 JSON 文件中的数据加载到 Google 地图中的地图标记中

Load data from JSON file into map markers in Google Maps

提问by WebDevDanno

I've got the following JSON file:

我有以下 JSON 文件：

{
   "universities" : [
    [
        "title": "Aberystwyth University",
        "web": "www.aber.ac.uk",
        "phone": "[phone]",
        "lat": 52.415524,
        "lng": -4.063066
    ],
    [
        "title": "Bangor University",
        "web": "www.bangor.ac.uk",
        "phone": "[phone]",
        "lat": 53.229520,
        "lng": -4.129987
    ],
    [
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "[phone]", 
        "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 onebut they're not loading. Any ideas?

但是数据没有加载（即地图标记和信息窗口没有显示）？我的 JSON 格式有什么问题吗？我已经看过 Stacked 以前的解决方案，例如这个，但它们没有加载。有任何想法吗？

回答by geocodezip

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"

1. 大学数组应该是一个 javascript 对象数组“{}”，而不是 javascript 数组“[]”。
2. 您需要处理 $.each 中的大学数组
3. 您的 javascript 对象的“web”属性不正确，代码需要“website”

working fiddle(without the JSON fetch)

工作小提琴（没有 JSON 提取）

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": "[phone]",
        "lat": 52.415524,
        "lng": -4.063066
      },
      {
        "title": "Bangor University",
        "website": "www.bangor.ac.uk",
        "phone": "[phone]",
        "lat": 53.229520,
        "lng": -4.129987
      },
      {
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "[phone]",
        "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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

回答by Joe Fitter

JSON is invalid - see correction

JSON 无效 - 请参阅更正

{
    "universities" : [
        {
            "title": "Aberystwyth University",
            "web": "www.aber.ac.uk",
            "phone": "[phone]",
            "lat": 52.415524,
            "lng": -4.063066
        },
        {
            "title": "Bangor University",
            "web": "www.bangor.ac.uk",
            "phone": "[phone]",
            "lat": 53.229520,
            "lng": -4.129987
        },
        {
            "title": "Cardiff Metropolitan University",
            "website": "www.cardiffmet.ac.uk",
            "phone": "[phone]", 
            "lat": 51.482708,
            "lng": -3.165881
        }
    ]
}