On October 13, 2021, we will turn off the service that provides the "Maps"
module for [`google.load`](https://support.google.com/code/answer/74501).
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](https://developers.google.com/maps/documentation/javascript/google-loader-migration.md.txt#inline-loading)
- [Dynamic loading from another JavaScript file](https://developers.google.com/maps/documentation/javascript/google-loader-migration.md.txt#dynamic-loading)

### 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

```javascript
<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"](https://developers.google.com/maps/documentation/javascript/google-loader-migration.md.txt#before)) with the
`<script>` tag shown in the following example:

```javascript
<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:

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

[See the documentation](https://developers.google.com/maps/documentation/javascript/overview.md.txt#Loading_the_Maps_API)

### 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"](https://developers.google.com/maps/documentation/javascript/google-loader-migration.md.txt#before))
with code to programmatically add the `<script>` tag, as shown in the following example:

```javascript
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:

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

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

```javascript
document.head.appendChild(script);
```

[See the documentation](https://developers.google.com/maps/documentation/javascript/overview.md.txt#Loading_the_Maps_API)