AI-generated Key Takeaways

outlined_flag

• The "Maps" module forgoogle.load will be discontinued on October 13, 2021, resulting in map loading errors if still in use.

• To avoid issues, developers must switch to alternative loading methods like inline or dynamic loading before the deadline.

• Inline loading involves replacing thegoogle.load script with a new script tag directly embedding the Maps JavaScript API.

• Dynamic loading allows for controlled, on-demand loading of the Maps JavaScript API triggered by user actions or specific events.

• Developers should remove or update the existinggoogle.load function calls in their code after implementing the new loading method.

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

What do I need to do?

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

Next, implement a new way to load the Maps JavaScript API (selectone 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 theMaps JavaScript API (there are two<script> blocks):

Before

<scripttype='text/javascript'src='https://www.google.com/jsapi'></script><scripttype='text/javascript'>google.load("maps","3.exp",{"callback":initMap,"key":"YOUR_KEY","libraries":"places,visualization"});functioninitMap(){// 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 thesame 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:

<scriptasyncsrc="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 thegoogle.load function call, sinceit's no longer needed. The following example shows a blankinitMap()function, which is called when the Maps library has loaded successfully:

<scripttype='text/javascript'>functioninitMap(){// 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. Forexample, you can wait to load the Maps JavaScript API until theuser 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:

varscript=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