Question

I’ve set up a google maps integration with my own custom map and markers dynamically placed by the backend on page load.

The problem is that my code centers the map on the marker, and if you try to pan the map anywhere it will re-position the map to the centered marker repeatedly (you are allowed to zoom in/out but not pan).

The map centering is handled as follows:

google.maps.event.addListener(map,'idle',function (map) {
    var coords = genCoords(map,"40.014","80.52");

    clueLocation = new google.maps.Marker({
        map:map,
        position: new google.maps.LatLng(coords.lat(),coords.lng()),
        center: new google.maps.LatLng(coords.lat(),coords.lng()),
        title: 'Ramara du Croissant'
    });
    map.setCenter( new google.maps.LatLng(coords.lat(),coords.lng()) );
}.bind(null,map));

And I have also made a live version available where the behavior can be experienced

If it does make a difference, the code in question will always show only a single marker, what I’ve discovered so far are boundary solutions when you need to center the map within a set array of markers which isn’t the approach I’m going for here.

Answer 1

The problem is that my code centers the map on the marker, and if you
try to pan the map anywhere it will re-position the map to the
centered marker repeatedly (you are allowed to zoom in/out but not
pan).

well, of course. you are listening to the idle event, and that is what happens after you pan the map.

The idle event is triggered whenever the map is finished redrawing after a scroll or zoom change.