Question

I’m adding a collection of markers to a map in the v3 api. Everything works fine, but when I drag the map (enough so the markers are off the screen), zoom in, and then drag the map back to the original center, the marker images are offset by roughly the distance I dragged the map. They’re still arranged in the correct shape, just moved.

A few other notes:

• The marker images don’t move if I drag and don’t zoom in, or if I drag and zoom out.
• If I just zoom in on the map until the markers are off the screen, the same thing happens
• Polylines do not move (i.e., they retain their correct position no matter what)
• In Firefox, marker images move (or rather, stay in their same pixel position and don’t move with the coordinates point on the map) whenever i zoom in on a point other than map center

Here’s the code I’m using the add markers:

var bounds = new google.maps.LatLngBounds;

for (i=0, len=points.length; i<len; i++) {

    var myPoint = points[i];
    var myLatLng = new google.maps.LatLng(myPoint.lat, myPoint.lng);

    var markerImage = new google.maps.MarkerImage(
        'http://www.mysite.com/images/marker.png',
        new google.maps.Size(21,21),    // size
        new google.maps.Point(0,0),     // origin
        new google.maps.Point(10,10),   // anchor
        new google.maps.Size(21,21)     // scale
    );

    var markerOptions = {};
    markerOptions.map = this.map;
    markerOptions.position = myLatLng;
    markerOptions.icon = markerImage;               
    markerOptions.draggable = true;

    this.markers[i] = new google.maps.Marker(markerOptions);

    bounds.extend(myLatLng);

}

It’s like the pane for the markers is disconnected from the pane for the map and polylines. Is there something I can do differently when adding the markers so the images retain their correct display position? This wasn’t a problem in V2.

Answer 1

I’m fired.

Just after the block of code in the example, I had

if (init) {
    //a bunch of stuff, PLUS
    this.map.fitBounds(bounds);

} else {
    //a bunch of other stuff, BUT NO fitBounds

}

so, adding

this.map.fitBounds(bounds);

in both logic paths fixed the problem