Migration: Maps Module in google.load

On October 13, 2021, we will turn off the service that provides the "Maps" module for google.load. This means that after October 13, 2021, if you try to use the "Maps" module in google.load you will receive an error (module "maps" is not supported), and no map will load. To help you avoid potential breakage, you must switch to one of the alternatives.

What do I need to do?

First, remove the <script> tag that loads the google.load loader, then remove calls to google.load. If you're using Google Loader for other things, it's okay to leave the loader <script> tag in place.

Next, implement a new way to load the Maps JavaScript API (select one of the following options):

• Inline loading using the <script> tag
• Dynamic loading from another JavaScript file

Current example using the Google Loader

The following example shows how the Google Loader is currently used to load the Maps JavaScript API (there are two <script> blocks):

Before

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Inline loading using the <script> tag (recommended)

When this approach is used, the Maps JavaScript API loads at the same time the page loads. To implement inline loading, first replace the <script> tag that loads www.google.com/jsapi ("before") with the <script> tag shown in the following example:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

Then in your javascript code, remove the google.load function call, since it's no longer needed. The following example shows a blank initMap() function, which is called when the Maps library has loaded successfully:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

See the documentation

Dynamic loading from another JavaScript file

Dynamic loading lets you control when the Maps JavaScript API is loaded. For example, you can wait to load the Maps JavaScript API until the user clicks a button or performs another action. To implement dynamic loading, first replace the <script> tag that loads www.google.com/jsapi ("before") with code to programmatically add the <script> tag, as shown in the following example:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

Then attach your callback function to the window object like this:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

Finally, add the <script> tag to the header of the page like this:

document.head.appendChild(script);

See the documentation