title: Google Maps is changing the center of map
body: <p>I have a few Google Maps on a page. Only one is shown at a time and you can change from one map to the other by clicking buttons. Since some maps are hidden when Google Maps first initialize the maps, I need to "refresh" the map that is being shown and for that I need to get the center of the map. I use <code>map.getCenter()</code> but somehow the center gets changed before getting there.</p>
  
  <p>I have debugged the following code and I know where it gets changed, but the why is still a mystery.</p>
  
  <pre><code>function initMaps() {
      if ($('.gmap').length) {
          var $maps = $('.gmap'),
          myOptions = {
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false,
              mapTypeControlOptions: {
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'mapStyle']
              }
          },
          maps = {};
  
          $maps.each(function () {
              var latitude = parseFloat($(this).attr('data-latitude')),
                  longitude = parseFloat($(this).attr('data-longitude')),
                  mapNumber = $(this).attr('data-number'),
                  baseLatLng = new google.maps.LatLng(latitude, longitude);
              myOptions.center = baseLatLng;
              maps[mapNumber] = new google.maps.Map(this, myOptions);
              var mapCustomType = new google.maps.StyledMapType(mapStyle, myOptions);
              maps[mapNumber].mapTypes.set('custom', mapCustomType);
              maps[mapNumber].setMapTypeId('custom');
          });
  
          $('.map').hide();
          $('.map:first').show();
          console.log(maps);  // Centers are the same
          changeMaps(maps);
      }
  }
  
  function changeMaps(maps) {
      console.log(maps); // Centers are the same
      $('.maps-list span').click(function () {
          console.log(maps); // Centers have changed !!!
          var $mapClass = $('.map-' + $(this).attr('class')),
              map = maps[parseInt($mapClass.find('.gmap').attr('data-number'))];
          $('.map').hide();
          $mapClass.show();
          refreshMap(map);
      });
  }
  
  function refreshMap(map) {
      google.maps.event.trigger(map, 'resize');
      map.setCenter(map.getCenter());
  }
  </code></pre>
  
  <p>In the <code>changeMaps()</code>function, the centers of my second map (the one that is hidden at first) changes during the click event of a button that does nothing else but trigger this function). I did remove a couple variables and changed a few class names so that the code is easier to read, so you can ignore any other problems with the code.</p>
  
  <p>I'd like to find out why the center gets changed, but if you have a cleaner way of doing all of this, that would also be great.</p>