Why is Google Maps .getCenter() returning invalid coordinates?

Question

On a relatively high traffic site with users from all over the world, starting yesterday (2/13/2019), at approximately 5pm UTC we started to receive AJAX callbacks with invalid coordinates.

We have Javascript which detects when the map is idle and then sends the coordinates to our server for a reverse geocoder lookup. Here is a simplification:

google.maps.event.addListener(mapObject, 'idle', function() {
  $.ajax({
    url: '/geo/reverse/lookup',
    type: 'GET',
    dataType: 'json',
    data: { 
      lat: mapObject.getCenter().lat(), 
      lng: mapObject.getCenter().lng() 
    }
  })
});

This has worked for a number of years without an issue. But yesterday we started receiving invalid lat/lng coordinates. This is causing the system we use to run the reverse geocoder lookup to complain. The majority of the invalid coordinates contain longitude values that are greater than 180.

We have not been able to reproduce the issue in house. But I had a hunch that this was browser-related. Perhaps a new browser version was released and it is handling the Gmaps JS differently. So we started looking at the User Agents of the bad requests. The majority of the browsers are reporting agent Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1 however not ALL of the requests are Mobile Safari so I am not sure if this is a browser or a Gmaps issue.

I am hoping somebody can help shed some light on this or perhaps this will help others in a similar situation.

Answer 1

There seems to be an issue with the getCenter method with versions 3.35 and 3.36 of the API. Version 3.34 works fine.

I am unable to get a latitude value of more than 90, but simply panning the map to the left or the right (in one direction) a few times shows longitude values out of the -180 / 180 degrees range.

I have opened a bug report in the issue tracker.

function initialize() {

    var myLatLng = new google.maps.LatLng(46.2,6.17);
    var mapOptions = {
        zoom: 2,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    google.maps.event.addListener(map, 'idle', function() {
    
      document.getElementById('lat').value = map.getCenter().lat();
      document.getElementById('lng').value = map.getCenter().lng();
    });
}

initialize();

body {
  font-family: Arial;
  font-size: 10px;
}

#map-canvas {
  height: 150px;
  margin-bottom: 10px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.36&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Lat: <input id="lat" type="text" /> Lng: <input id="lng" type="text" />

Here is the same code with version 3.34 which works fine:

function initialize() {

    var myLatLng = new google.maps.LatLng(46.2,6.17);
    var mapOptions = {
        zoom: 2,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    google.maps.event.addListener(map, 'idle', function() {
    
      document.getElementById('lat').value = map.getCenter().lat();
      document.getElementById('lng').value = map.getCenter().lng();
    });
}

initialize();

body {
  font-family: Arial;
  font-size: 10px;
}

#map-canvas {
  height: 150px;
  margin-bottom: 10px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.34&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Lat: <input id="lat" type="text" /> Lng: <input id="lng" type="text" />