Google Map marker disappears after drag

Question

When I move a marker to top of my map and out of view (see image below), it gets a high opacity which makes the marker close to invisible.

This bug only happens in Safari and I really have no clue what might be causing this.

If you look close at the second image you can see the marker.

    var myMarker = new Array();

$(function () {

    latitude = 59.3294;
    longitude = 18.0686;


    var mapOptions = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 4,
        disableDefaultUI: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    }

        map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

        var id = 1;

        var image = {
        url: 'http://i.imgur.com/4yjea7s.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(33, 42),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(16, 42)
    };
            myMarker[id] = new google.maps.Marker({
                position: new google.maps.LatLng(57.721035,12.939819),
                map: map,
                animation: google.maps.Animation.DROP,
                draggable: false,
                icon: image
            });

            google.maps.event.addListener(myMarker[id], 'click', function() {
           var image = {
        url: 'http://i.imgur.com/1eHR1c3.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(108, 141),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(54, 0)
      };
      myMarker[id].setDraggable(true);
      myMarker[id].setIcon(image);
          });

    });

jsfiddle: http://jsfiddle.net/S5T9b/1/

http://jsfiddle.net/S5T9b/1/embedded/result/

Steps to reproduce the error:

1. Click on a marker on the map
2. Drag the marker to the far top of the map div and drop it.

The marker should now be almost invisible but if you look closely it's still there. And you can still click on it again and move it - It then becomes visible again.

Is it a programming issue by me or is this a google maps bug in Safari?

Answer 1

I am pretty sure this is a Google maps bug. However I got it to work by using this solution:

You have to both specify a zIndex and add

optimized: false

to every marker constructor, eg.

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: resultIcon,
    optimized: false,
    zIndex: 5
})

Copied from : https://stackoverflow.com/a/12061606/1679809

Answer 2

Works fine for me in Safari using Windows 7. It is possible that this is just a tiny bug, since from your code I can't see anything that would cause the code to work fine on all browsers except Safari.

I'm not sure if these guys have the exact same problem as you, but it might be worth checking the links out anyway:

http://www.google.com/support/forum/p/maps/thread?tid=56c196bd9ad37c24&hl=en

http://www.google.com/support/forum/p/maps/thread?tid=26db8fd040386548&hl=en

Why are Google Map markers showing up on Firefox by not on Chrome, Safari and Internet Explorer