Map centering issue in SafeCracker form with Google Maps for EE

Question

I'm using Google Maps for EE in a SafeCracker form, and the map field is within some jQuery tabs. I previously had an issue with the map not displaying correctly if it wasn't on the first tab that loaded when the page loads (as per this question), but this has been solved by calling the tabs with the following code in my external functions.js file:

$('.tabbed-form .tabs').kosTabs({
  after: function() {
    if(typeof Gmap !== 'undefined') {
      var instance = Gmap.instances[0];
      if(typeof instance !== 'undefined') {
        google.maps.event.trigger(instance.map, 'resize');
        instance.map.setCenter(instance.center);
      }
    }
  }
});

The above solution works fine for creating new entries as the map centres on the latitude, longitude and zoom that I specified in the custom field settings.

But when editing an existing entry that has already had a marker plotted on the map though, I'm finding that the map isn't loading with the marker in view on the map (like it would do in normal circumstances) - instead, it's loading at the map centre (the one entered in the custom field settings), but at a zoomed-in level.

Can anyone show me how to adapt the above JS to make existing entries load with the marker in view please? Thanks.

Answer 1

Before issuing the resize call, simply record the current map centre so you can reset it. Like this:

$('.tabbed-form .tabs').kosTabs({
  after: function() {
    if(typeof Gmap !== 'undefined') {
      var instance = Gmap.instances[0];
      if(typeof instance !== 'undefined') {
        var center = instance.map.getCenter();
        google.maps.event.trigger(instance.map, 'resize');
        instance.map.setCenter(center);
      }
    }
  }
});