google carte info fenêtre avec ajax v3

Question

Je l'ai presque, mais ça ne marche pas tout à fait. J'essaie de charger le contenu via ajax, et il charge le contenu correct, je peux le voir charger dans firebug mais il me donne une erreur: infowindow n'est pas défini. Je ai quelque chose hors de propos avec load_content

Les deux ont commenté les lignes avant load_content travail pour charger une petite fenêtre avec du texte.

function initialize() { 
    var myLatlng = new google.maps.LatLng(<%= @location_for_map.average(:lat) %>, <%= @location_for_map.average(:lng) %>); 
    var myOptions = { 
    zoom: 13, 
    center: myLatlng, 
    mapTypeControl: false, 
    navigationControl: true, 
    navigationControlOptions: { 
    style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    //var infowindow = new google.maps.InfoWindow(); 

    setMarkers(map, places); 

} 

function setMarkers(map, locations) { 
    // Add markers to the map 

    for (var i = 0; i < locations.length; i++) { 
     var place = locations[i]; 
     var myLatLng = new google.maps.LatLng(place.lat, place.lng); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: '/images/google_maps/numbers/'+(i+1)+'.png', 
    html: place.name, 
    id: place.id, 
      title: place.name 
     }); 

    var infowindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(marker, 'click', function() { 
    //infowindow.setContent(this.html); 
    //infowindow.open(map,this); 
    load_content(marker, this.id); 

    }); 
    } 
} 

function load_content(marker, id){ 
    $.ajax({ 
    url: '/places/' + id + '.js', 
    success: function(data){ 

     infowindow.setContent(data); 
     infowindow.open(map, marker); 
    } 
    }); 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

Answer 1

Cela fonctionne:

function setMarkers(map, locations) { 
    // Add markers to the map 

    for (var i = 0; i < locations.length; i++) { 
     var place = locations[i]; 
     var myLatLng = new google.maps.LatLng(place.lat, place.lng); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: '/images/google_maps/numbers/'+(i+1)+'.png', 
      html: place.name, 
      id: place.id, 
      title: place.name 
     }); 

     var infowindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(marker, 'click', function() { 
      load_content(map,this,infowindow);  
     }); 
    } 
} 

function load_content(map,marker,infowindow){ 
    $.ajax({ 
    url: '/places/' + marker.id + '.js', 
    success: function(data){ 
     infowindow.setContent(data); 
     infowindow.open(map, marker); 
    } 
    }); 
} 

Answer 2

Votre déclaration infowindow a une portée uniquement dans la fonction. Essayez de déclarer la variable infowindow avec une portée globale. Je crois que c'est ce qui cause le problème 'infowindow non défini'.

Answer 3

Déplacer cette ligne:

 
var infowindow = new google.maps.InfoWindow(); 

être en dehors de toute fonction, par exemple juste après la fonction initialize() {}