Google Maps API change?

Question

I built a map component for a web application using google maps, open layers, and the dojo toolkit. It loaded a google map and plotted data points. Until early this morning everything was working just fine, but suddenly the map stopped loading. There are no JavaScript errors, open layers and google still initialize, the data points still plot in their respective locations, but the map does not load. Below are the resources I am using:

<script src="//openlayers.org/api/OpenLayers.js"></script>
<script src="//maps.google.com/maps/api/js?v=3&libraries=places&sensor=false"></script>

I just tried the 'Hello World' example google provides ( found below ) and noticed that it works.

https://developers.google.com/maps/documentation/javascript/tutorial

I noticed that example requires the use of an API Key. I tried putting my API key into the resource used above, but to no avail. I also tried copying the resource they use in the example and that failed because it caused errors in open layers.

Has Google decided to deprecate functionality here and I need to rebuild this component? Is there something I'm missing?

NOTE:

I have temporarily solved my issue in production by switching from Google Maps to Open Street Maps. It can be found here https://www.beaconsinspace.com/map. This also proves the problem lies in loading the map, and not something else.

Answer 1

The problem is the result of a bug in OpenLayers.

https://github.com/openlayers/openlayers/issues/1450

From reading through the issue, it looks like it now has a solution. Check it out.

Note that the Google Maps API v3.20 will go away in about three months.

Answer 2

Reverting to version 3.20 worked for me:

<script src="//maps.google.com/maps/api/js?v=3.20"></script>

Credit goes to @geocodezip for putting me on the right track.

Answer 3

Thanks to the answer by @geocodezip and the comment by @benjamin I have found the solution.

What has happened is a google API update ( as described in @geocodezip answer ). The solution for me was to specify api version 3.20:

<script src="//maps.google.com/maps/api/js?v=3.20&sensor=false"></script>

--OR--

<script src="//maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>

Answer 4

Looks like as announced in the notify group v.exp is now v3.22, which would mean the release version is v3.21 and the frozen version is v3.20.

It seems like every time a new version of the API rolls out, temporary issues happen with loading the tiles. Did you try doing a complete refresh (clearing the browser cache). It is possible the issues are due to caching of pieces of the API.

You are not using the currently documented URL for the API, (maps.google.com/maps/api/js vs maps.googleapis.com/maps/api/js) which may also have something to do with it.

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

(not that I agree with the async defer and the callback=... in that example).