Charger des données à partir du fichier JSON en marqueurs de carte dans Google Maps
J'ai suivantes fichier JSON:
{
"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
]
]
}
Et je suis en train de charger les données de ce fichier dans mon google maps script pour produire certains marqueurs de carte avec les fenêtres d'informations. Voici mon 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);
Mais les données n'est pas de chargement (c'est à dire les repères de la carte et infowindows ne s'affichent pas)? Existe-il des problèmes avec mon format JSON. J'ai regardé les solutions antérieures de Empilées comme cette une mais ils ne sont pas de chargement. Des idées?
Vous devez vous connecter pour publier un commentaire.
Il y a trois problèmes avec le posté code:
travail de violon (sans le JSON fetch)
de travail extrait de code:
JS:
CSS:
HTML:
JSON n'est pas valide - voir la correction