Google Haritalar yer paylaşımlı mesaj gizli kalmayacak

Question

AJAX aracılığıyla alınan işaretçilerle, php sunucusu çağrısına gönderilen bir harita var. AJAX dönüşünde, her işaretçiye geçiş yaparım ve bir yer paylaşımlı harita iletisini açmak için bir onClick dinleyicisi ayarlayın.

Her şey çalışıyor. İşaretçiler görünür, bir işaretçiyi tıkladığımda mesajın üst üste geldiği görülür. Ancak mesajı kapatmak için tıkladıktan sonra haritayı herhangi bir şekilde sürükleyip veya zumladım veya değiştiririm, mesaj tekrar belirir. Sadece gizli kalmayacak.

Dikkat ettiğim bir başka şey ise, eğer bir işaretçiyi tıklarsam, diğerini tıklarsanız, mesaj yeni işaretçiler mesajına dönüşecektir. Fakat haritayı sürüklersem, mesaj, sürüklemeyi bırakana kadar ve geçerli işaretleyicinin mesajına yerleşene kadar, önceki ve geçerli işaretçi mesajı arasında uçmaya başlar. Bu sorunların ilişkili olup olmadığını bilmiyorum. Herhangi bir öneri çok takdir edilecektir. Teşekkürler.

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

Sonunda bir iş buldum. Z-endeksini -1 olarak ayarladım. işaretleyici dinleyici içinde

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

Bir onClick, ben 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