Google Maps v3 - Indicatori non visualizzati

Question

Sto tentando di posizionare più indicatori su una mappa di Google (API v3). Ho guardato i documenti di Google e anche questo thread. La mappa disegna e centra il punto di inizio ma sulla mappa non vengono visualizzati indicatori.

Firebug non segnala errori.

Ecco il JS

<script type="text/javascript"> 

    var map; 

    function initialize() { 
      var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(41.056466,-85.3312009), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    //Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker({ 
     position: Latlng_0, 
        title:"0"}); 

     marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker({ 
     position: Latlng_1, 
     title:"1"}); 
     marker_1.setMap(map); 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Grazie per guardare!

Answer 1

Il motivo i marcatori non vengono visualizzati è perché quella parte del codice è sempre eseguito prima l'evento carico s'incendia e il metodo di inizializzazione viene invocato - a quel punto è già creato la variabile mappa, ma è ancora nulla .

prova ad aggiungere il codice per aggiungere i marcatori all'interno del metodo di inizializzazione

var map; 

function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    // Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker(
     { 
      position: Latlng_0, 
      title:"0" 
     } 
    ); 

    marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker(
     { 
      position: Latlng_1, 
      title:"1" 
     } 
    ); 

    marker_1.setMap(map); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

vedono questo jsfiddle qui, dove i marcatori vengono visualizzati http://jsfiddle.net/KvugB/

Answer 2

io uso questo codice. Spero che ti aiuta:

(function() { 

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(41.056466, -85.3312009), 
     disableDefaultUI: false, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 


    // Creating the JSON data 
    var json = [ 
     { 
      "title": "Title 1", 
      "lat": 41.057814980291, 
      "lng": -85.329851919709, 
      "description": "" 
     }, 
     { 
      "title": "Title 2", 
      "lat": 41.057814981000, 
      "lng": -85.8048, 
      "description": "" 
     }, 
    ] 

    var styles = [ 
    { 
    "featureType": "water", 
    "elementType": "geometry.fill", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#0077bb" }, 
    { "lightness": 70 } 
     ] 
     },{ 
     "featureType": "landscape.natural", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "saturation": -100 }, 
     { "color": "#699e6b" }, 
     { "lightness": 76 } 
     ] 
     },{ 
     "featureType": "poi.park", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "off" } 
     ] 
     },{ 
     "featureType": "road.local", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#ffffff" } 
     ] 
     } 
     ]; 

     map.setOptions({styles: styles}); 



    // Creating a global infoWindow object that will be reused by all markers 
    var infoWindow = new google.maps.InfoWindow(); 

    // Looping through the JSON data 
    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 
     }); 

     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function(marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 


     })(marker, data); 

    } 

} 

    })(); 

Answer 3

Questa è una risposta a @ di JoanManuelHernández risposta, ma non riesco a postare formattato il codice in un commento.

Joan, la tua soluzione è eccellente; è molto simile a come lo farei io stesso. La creazione di una matrice di posizioni dei marcatori è decisamente migliore rispetto all'utilizzo di singole variabili per ciascuna di esse.

Mi piacerebbe suggerire un paio di piccoli miglioramenti. Uno è dove si dispone della matrice denominata json. Questo non è un nome molto descrittivo; json potrebbe significare qualsiasi tipo di dati. Che ne dici di chiamarlo qualcosa come places o locations o simili?

Successivamente, dove si ha il ciclo che crea la chiusura per gestire il callback asincrono, penso che sia un po 'più facile capire come funziona se si sposta l'intero corpo del loop nella sua funzione. Quindi non hai bisogno della funzione anonima in linea. Quindi, questo codice:

// Looping through the JSON data 
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 
    }); 

    // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
    (function(marker, data) { 

     // Attaching a click event to the current marker 
     google.maps.event.addListener(marker, "click", function(e) { 
      infoWindow.setContent(data.description); 
      infoWindow.open(map, marker); 
     }); 


    })(marker, data); 
} 

sarebbe diventato:

// Looping through the places list 
for(var i = 0, length = places.length; i < length; i++) { 
    addPlace(places[i]); 
} 

// Add one place marker 
function addPlace(place) { 
    var latLng = new google.maps.LatLng(place.lat, place.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: place.title 
    }); 

    // Attaching a click event to the current marker 
    google.maps.event.addListener(marker, "click", function(e) { 
     infoWindow.setContent(place.description); 
     infoWindow.open(map, marker); 
    }); 
} 

Si fa la stessa cosa, solo un po 'più semplice in questo modo.

Un altro pensiero: La roba mappa in stile è molto cool — Sono un grande fan di mappe con stile me stesso — ma mi chiedo se deve essere lasciato fuori qui per ragioni di semplicità, in quanto non è legato alla la domanda dell'OP?

Sentiti libero di incorporare qualsiasi di queste idee nella tua risposta, se ti piacciono, e se qualcun altro trova utile questa variazione, si prega di revocare la risposta di Joan poiché è da lì che proviene il codice originale.