[TypeScript](https://www.typescriptlang.org/) is a typed superset
of JavaScript that compiles to plain JavaScript. The sample code below
demonstrates simple usage of Google Maps using TypeScript:


### TypeScript

```typescript
async function init(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map')!;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
```

### JavaScript

```javascript
async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Access the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;

    console.log({ mapElement, innerMap });
}

void init();
```

### CSS

```css
/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
```

### HTML

```html
<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" map-id="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>
```
[View example](https://developers.google.com/maps/documentation/javascript/examples/map-simple.md.txt)

<br />

## Get started

The
[DefinitelyTyped project](https://github.com/DefinitelyTyped/DefinitelyTyped)
is an open source project that maintains type
[declaration files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
for many packages including Google Maps. Use NPM to install the Google Maps
JavaScript declaration files from the
[@types/google.maps](https://www.npmjs.com/package/@types/google.maps)
package:

```bash
npm i -D @types/google.maps
```

For more information, see
[source files](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/google.maps)
on GitHub.

> [!NOTE]
> **Note:** These types are automatically generated. To report an issue with these types, open a [support ticket](https://issuetracker.google.com/issues/new?component=188853&template=788207).

## Add `google.maps` to the `tsconfig` `types` option

If your `tsconfig` file sets the `types` compiler option, TypeScript includes
only the `@types` packages listed in that array. Installing `@types/google.maps`
isn't enough to enable TypeScript support for Google Maps, and code that uses
the `google` namespace fails to compile with the following error:

    Error T2503: Cannot find namespace 'google'.

To add `google.maps` to the `types` array:

```json
{
  "compilerOptions": {
    "types": ["google.maps"]
  }
}
```

Alternatively, add the following directive to a declaration file that your
project includes, such as `vite-env.d.ts`:

```typescript
/// <reference types="google.maps" />
```

For more information, see
[types](https://www.typescriptlang.org/tsconfig#types).

## Conflicting @types packages

Some libraries may use a package other than
[@types/google.maps](https://www.npmjs.com/package/@types/google.maps),
which may cause conflicts. Use the
[skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck)
compiler option to avoid issues with inconsistent types:

```json
{
  "compilerOptions": {
    "skipLibCheck": true
  }
}
```

## Specify typeRoots

Some frameworks such as Angular may require specifying the
[typeRoots](https://www.typescriptlang.org/tsconfig#typeRoots)
compiler option to include types installed from
[@types/google.maps](https://www.npmjs.com/package/@types/google.maps)
and all other `@types` packages.

By default all visible `@types` packages are included in your compilation.
Packages in `node_modules/@types` of any enclosing folder are considered
visible:

```json
{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}
```