Google Maps-Overlay-Nachricht bleibt nicht versteckt

Question

Ich habe eine Karte mit Markern gefüllt über AJAX php Server-Anruf abgerufen. Bei der AJAX-Rückkehr durchlaufe ich jeden Marker und setze einen onClick-Listener, um eine überlagerte Kartennachricht zu öffnen.

Alles funktioniert. Die Markierungen erscheinen, die Nachricht erscheint überlagert, wenn ich auf einen Marker klicke. Aber nachdem ich geklickt habe, um die Nachricht zu schließen, und ich ziehe oder zoome oder ändere die Karte in irgendeiner Weise, erscheint die Nachricht wieder. Es wird einfach nicht verborgen bleiben.

Eine andere Sache, die ich bemerkte, ist, dass, wenn ich auf einen Marker klicke, dann auf einen anderen klicke, wird die Nachricht zu der neuen Marker-Nachricht wechseln. Aber wenn ich die Karte ziehe, fängt die Nachricht an, zwischen der vorherigen und der aktuellen Markierung zu wechseln, bis ich aufhebe, sie zu ziehen und sie auf die Nachricht des aktuellen Markers setzt. Ich weiß nicht, ob diese Probleme zusammenhängen. Irgendwelche Vorschläge würden sehr geschätzt. Vielen Dank.

//create map 
var mapOptions = { 
    zoom: 3, 
    center: defaultLatLng, 
    minZoom: 3, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map($("div#map_canvas").get(0), mapOptions); 

//send ajax requesting markers 
$.ajax({ 
    ... 
    success: function(data) { 
     $.each(data, function(index, value) { 
      var markerLat = value.lat; 
      var markerLng = value.lng; 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(markerLat, markerLng), 
       map: map   
      }); 
      marker.id = value.id; //set the marker id 

      var markerListener = google.maps.event.addListener(marker, "click", function(event){ 
       /*****move map position****/ 
       map.setCenter(marker.getPosition()); 

       //send ajax requesting data based on id of marker clicked 
       $.ajax({ 
        ... 
        success: function(data) { 
         //actual message 
         var html = "<a id='close' href='#'>close</a>" 
          + "<p>" + data.message + "</p>"; 
         setMapMessage(html, map); 
        } //end success for markerListener 
       }); //end ajax for markerListener 
      }); //end markerListener 
     }); //end $.each() 
    } //end success for ajax getting all the markers 
}); //end ajax for getting all the markers 

function setMapMessage(message, map){ 
    //Create custom message 
    var overlay = new google.maps.OverlayView(); 
    overlay.draw = function() { 
     $("#map_message").html(message).show(); 
     $("a#close").click(function(){ 
      $("#map_message").hide(); 
     }); 

     //get the coordinates of the map (used to set X and Y of the map_message) 
     var mapPosition = $("#map_canvas").position(); 

     var mapContainerX = mapPosition.left; 
     var mapContainerY = mapPosition.top; 

     $("#map_message").css({ 
      top: mapContainerY, 
      left: mapContainerX 
     }); 
    }; 
    overlay.setMap(map); 
} 

Answer 1

Ich endlich herausgefunden, eine Arbeit herum. Ich setze den Z-Index einfach auf -1.

$("a#close").click(function(){ 
    $("div#map_message").hide().css("z-index", -1); 
}); 

Ein im Marker-Hörer onClick, stelle ich die z-Index 5.

var markerListener = google.maps.event.addListener(marker, "click", function(event){ 
    /*****move map position****/ 
    map.setCenter(marker.getPosition()); 

    //send ajax requesting data based on id of marker clicked 
    $.ajax({ 
     ... 
     success: function(data) { 
      //actual message  
      var html = "<a id='close' href='#'>close</a>" 
       + "<p>" + data.message + "</p>"; 
      setMapMessage(html, map); 
      $("div#map_message").css("z-index", 5); 
     } //end success for markerListener 
    }); //end ajax for markerListener 
}); //end markerListener