Google Maps – Più marcatore da extern json

Devo aggiungere un marker multiplo a una mappa google, ma i dati sono in un file json extern.

Al momento Im in esecuzione come questo

var json = [ { "title": "Stockholm", "lat": 59.3, "lng": 18.1, "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" }, { "title": "Oslo", "lat": 59.9, "lng": 10.8, "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." }, { "title": "Copenhagen", "lat": 55.7, "lng": 12.6, "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." } ]; for (var i = 0, length = json.length; i < length; i++) { var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); } 

Ora sto cercando di escludere il file Json in un altro file, ma sadyl non posso farlo funzionare; (

Codice

 $.getJSON("foo.txt", function(json1) { }); for (var i = 0, length = json.length; i < length; i++) { var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); } 

foo.txt

 { "title": "Stockholm", "lat": 59.3, "lng": 18.1, "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" }, { "title": "Oslo", "lat": 59.9, "lng": 10.8, "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." }, { "title": "Copenhagen", "lat": 55.7, "lng": 12.6, "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." } 

Grazie per l'aiuto

Ci sono due problemi nel tuo codice. Il file json manca di [ all'inizio e ] alla fine. Anche il tuo javascript è sbagliato, vuoi fare qualcosa con il json nella callback di getJSON . Il codice per il tuo problema è:

 $.getJSON("foo.txt", function(json1) { $.each(json1, function(key, data) { var latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); }); }); 

EDIT:

Ecco un esempio di lavoro basato sul tutorial di Google Maps . Hai bisogno del file corretto foo.txt :

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"> </script> <script type="text/javascript"> var map; function initialize() { var mapOptions = { center: new google.maps.LatLng(58, 16), zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> <script type="text/javascript"> $(document).ready(function() { $.getJSON("foo.txt", function(json1) { $.each(json1, function(key, data) { var latLng = new google.maps.LatLng(data.lat, data.lng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, title: data.title }); marker.setMap(map); }); }); }); </script> </body> </html> 

L'esempio halex fornito non funzionava per me. Ho ordinato l'aggiunta di parentesi quadre in foo.txt per dichiararla come un arrays e eseguire un server web per accedere al file html piuttosto che aprirlo in un browser.

Ho anche bisogno di aggiungere un ritardo:

 setTimeout(function (){marker.setMap(map);}, 1000); 

Ora funziona splendidamente!

Nella documentazione di mappe di Google è ansible trovare un esempio: https://developers.google.com/maps/documentation/javascript/importing_data

JQuery non era necessario

 <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 = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; document.getElementsByTagName('head')[0].appendChild(script); } // Loop through the results arrays and place a marker for each // set of coordinates. window.eqfeed_callback = function(results) { for (var i = 0; i < results.features.length; i++) { var coords = results.features[i].geometry.coordinates; var latLng = new google.maps.LatLng(coords[1],coords[0]); var marker = new google.maps.Marker({ position: latLng, map: map }); } } </script>