Google Maps: marker icon and popup window

Question

The code below opens a popup-window whenever a marker on the map is clicked. It works:

<script type="text/javascript">
    function popup() {
        newwindow = window.open('test.php','Test','width=800,height=500');
        newwindow.focus();
        return false;
    }

    function addMarker(lat, lng, map){
        var latlng = new google.maps.LatLng(lat,lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        google.maps.event.addListener(marker, 'click', function() {
            popup();
        });
    }

    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(47.367633, 8.542557),
            zoom: 5,
            scrollwheel: true,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            mapTypeControlOptions:{
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControlOptions:{
                style: google.maps.NavigationControlStyle.SMALL
            }
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var jsonData = <?php echo $json; ?>;

        for(var i = 0; i < jsonData.length; i += 1){
            addMarker(jsonData[i].lat, jsonData[i].lng, map);
        }
    }
</script>

If I add a marker icon, however, the popup-window still opens, but it immediately disappears in the background, i.e., behind the browser window that contains the map:

function addMarker(lat, lng, map){
    var latlng = new google.maps.LatLng(lat,lng);
    var marker = new google.maps.Marker({
        position: latlng,
        icon: 'myicon.png',
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        popup();
    });
}

What is the reason for this behavior?

Answer 1

This is an interesting issue. It looks like it has to do with the Google Map window requesting focus after the click event. It's strange how it only happens when you use a custom marker icon though.

You could consider working around this issue by launching your popup with a slight delay of 1 millisecond. Tested on Firefox 3.6.3 and it seems to solve your problem:

function popup() {
   setTimeout(function () {
      var newwindow = window.open('test.php','Test','width=800,height=500');
      newwindow.focus();
   }, 1);
   return false;
}

However, you could also consider not using popup windows at all. Many users still consider them evil, and you'd probably end up battling with popup blockers all the time.