Google Maps - Multiple marker from extern json

Devo aggiungere più marker a una mappa di google, ma i dati sono in un file json esterno.Google Maps - Multiple marker from extern json

Al momento Im in esecuzione in questo modo

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 Im cercando di exlude il file JSON per 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

fonte

2013-02-28 Maxi

Ci sono due problemi nel codice. Il file json manca lo [ all'inizio e lo ] alla fine. Anche il tuo javascript è sbagliato, vuoi fare qualcosa con il json nella callback di getJSON. Il codice per il vostro 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 in base alla google maps tutorial. È necessario il 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>

fonte

2013-02-28 20:26:25 halex

grazie uomo, che in realtà ha aiutato: D – Maxi

È possibile controllare la sintassi JSON con questo strumento: http: //jsonlint.com/ - spero che questo aiuti –

grazie, ha funzionato senza alcun problema o eventuali modifiche! – Danish

L'esempio di halex fornito non ha funzionato per me. L'ho risolto aggiungendo le parentesi quadre in foo.txt per dichiararlo come una matrice ed eseguire un server Web per accedere al file html, piuttosto che aprirlo semplicemente in un browser.

Ho anche bisogno di aggiungere un ritardo:

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

Ora funziona splendidamente!

fonte

2017-04-03 14:43:18 mattsnow

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

JQuery non necessaria

<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 array 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>

fonte

2017-05-12 14:13:11 rafa226

Google Maps - Multiple marker from extern json

risposta

Problemi correlati