Оверлейное сообщение Google Maps не останется скрытым

Question

У меня есть карта, заполненная маркерами, полученными через AJAX для вызова php-сервера. По возвращении AJAX я перебираю каждый маркер и настраиваю прослушиватель onClick, чтобы открыть наложенное сообщение карты.

Все работает. Маркеры отображаются, сообщение отображается наложенным, когда я нажимаю на маркер. Но после того, как я щелкнул, чтобы закрыть сообщение, и я перетаскиваю, увеличиваю или изменяю карту любым способом, сообщение появляется снова. Это просто не останется скрытым.

Еще одна вещь, которую я заметил, это то, что если я нажму на один маркер, а затем нажму на другой, сообщение изменится на новое сообщение маркеров. Но если я перетаскиваю карту, сообщение начинает перемещаться между предыдущим и текущим сообщением маркера, пока я не перестану перетаскивать его, и оно не будет соответствовать сообщению текущего маркера. Я не знаю, связаны ли эти проблемы. Любые предложения будут высоко ценится. Благодарю.

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

Я наконец-то разобрался с работой. Я просто установил z-index на -1.

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

В прослушивателе маркера onClick я установил для 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