Google Maps returning longitude >180 in LatLng.toUrlValue

Question

I am building a global map with overlay polygons. It is inside a jQuery Accordion. Whenever I switch accordion panes and then come back to the map, it jumps down to Antarctica. To overcome this behavior, I have been trying to capture the current center LatLng, store it in a variable, then setCenter() when returning to the map's accordion panel.

It didn't work, so I tried using the .toUrlValue() method to dump the current center coordinates to a visible element on the page. As I pan the map east or west, the longitude number just keeps incrementing. I expected it to go to 180 then reset to -180.

My code:

var currMapCenter = null;

jQuery(document).ready(function() {
  jQuery("#accordion").bind('accordionchange', function(event, ui) {
    if (ui.newContent.attr('id') == 'region-list')
    {
    triggerMapResize(); 
    }
});
});

function initialize_map() {

//do all the initialization here...

currMapCenter = map.getCenter(); //set initial center in variable.

google.maps.event.addListener(map, 'center_changed', function() {
  currMapCenter=map.getCenter();
  jQuery("#description").html(currMapCenter.toUrlValue());//to see what is happening...
});
}

function triggerMapResize()
{
google.maps.event.trigger(map, "resize");
map.setCenter(currMapCenter);
}

The documentation indicates getCenter() returns a LatLng, and setCenter() requires a LatLng. Am I misunderstanding what happens when I try to set currMapCenter = map.getCenter()? Given that my map needs to wrap as it currently does, how do I capture a usable LatLng to use with setCenter()?

Answer 1

getCenter() returns LatLng, but it could be more than 180 degrees. It depends on how many times you rotate the earth around its axis. :)

I found simple fix for this problem

var loc=map.getCenter();
loc=new google.maps.LatLng(loc.lat(), loc.lng(), false);

Now LatLng is recalculated to proper values and you can use it ...

Answer 2

The that behavior is documented for the Map object getCenter method

getCenter()
LatLng
Returns the position displayed at the center of the map. Note that this LatLng object is not wrapped . See LatLng for more information.

Maybe you can use getBounds() (might not work if the map is zoomed out to show multiple copies)

getBounds()
LatLngBounds
Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive.

Answer 3

It seems now that the title of this topic is inaccurate and irrelevant to the actual problem. IE8 - no surprise - was giving me all sorts of problems and failing to draw the map at all, while standards-compliant browsers were fine except the loss of center when switching accordion panes.

In my original code, I was listening for the 'center_changed' event to capture the current map center coordinates. I started wondering if jQuery's events were altering the position of the map as the accordion closed, so I switched the center capture event to 'mouseout'. This solved the problem, though I still don't know what caused it.

side-note: I had been using window.onload = function () { initialize_map(); } with success in browsers other than IE, but IE choked and wouldn't load at all.

var map=null;
var currMapCenter = null;

jQuery(document).ready(function() {
jQuery("#accordion").bind('accordionchange', function(event, ui) {
if (ui.newContent.attr('id') == 'region-list')
{
if(map==null) {
//first load; call map initialization
initialize_map();
}
triggerMapResize(); 
}
});

function initialize_map() {

//do initilization here...

google.maps.event.addListener(map, 'mouseout', function() { 
currMapCenter=map.getCenter();
});
}

function triggerMapResize() {
google.maps.event.trigger(map, "resize");
map.setCenter(currMapCenter);
}

The above code works without a problem; tested in Firefox 14, Chrome and IE8.

Answer 4

Thanks, this thread helped me. This is the code I used to verify the noWarp setting and access the center that I required without the coordinates going over the +/- 180 degrees :-

var gmap_center = new google.maps.LatLng(map.getCenter().lat(), map.getCenter().lng(), false);

console.log('GMap lat/lng with default noWrap:true = ' + map.getCenter().lat() + ' / ' + map.getCenter().lng());

console.log('GMap lat/lng with noWrap:false = ' + gmap_center.lat() + ' / ' + gmap_center.lng());