Adicionar um mapa do Google a uma página da Web

Adicione um mapa do Google a uma página da Web usando código HTML, CSS e JavaScript. Nesta página, mostramos como adicionar um mapa a uma página da Web e, em seguida, acessar a instância do mapa de maneira programática.

Adicionar um mapa usando um elemento gmp-map
Adicionar um mapa usando um elemento div e JavaScript
Definir e receber propriedades na instância do mapa

Visão geral

Para carregar um mapa, sua página da Web precisa:

Carregar a API Maps JavaScript usando um carregador bootstrap. É aqui que sua chave de API é transmitida. Ela pode ser adicionada aos arquivos de origem HTML ou JavaScript.
Adicionar o mapa à página HTML e também os estilos de CSS necessários.
Carregar a biblioteca maps e inicializar o mapa.

Adicionar um mapa usando um elemento `gmp-map`

O elemento gmp-map é a maneira preferida de adicionar um mapa do Google a uma página da Web. É um elemento HTML personalizado criado usando componentes da Web. Etapas para adicionar um mapa a uma página da Web usando um elemento gmp-map.

Adicione um elemento script que contenha o bootstrap a uma página HTML ou a um arquivo de origem JavaScript ou TypeScript sem o elemento script. Configure o bootstrap com sua chave de API e outras opções. Você pode escolher a importação dinâmica de bibliotecas ou o carregamento direto de scripts. Este exemplo mostra como adicionar o bootstrap de carregamento de script dinâmico a uma página HTML:

<script>
  (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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Saiba mais sobre como carregar a API Maps JavaScript.

Na página HTML, adicione um elemento gmp-map. Especifique as coordenadas de latitude e longitude para center (obrigatório), um valor de zoom para zoom (obrigatório) e um map-id, se necessário (obrigatório para alguns recursos, como marcadores avançados).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>index.html

Exemplo de código completo

TypeScript

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

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

JavaScript

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();index.js

CSS

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

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>index.html

Testar amostra

JSFiddle.net

Adicionar um mapa usando um elemento `div` e JavaScript

Etapas para adicionar um mapa a uma página da Web usando um elemento div.

<script>
  (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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Saiba mais sobre como carregar a API Maps JavaScript.

Na página HTML, adicione um elemento div para conter o mapa.
```
<div id="map"></div>
```
No CSS, defina a altura do mapa como 100%. O atributo height do CSS é necessário para que o mapa fique visível.
```
#map {
  height: 100%;
}
```

No arquivo JS ou TS, crie uma função para carregar a biblioteca maps e inicializar o mapa. Especifique as coordenadas de latitude e longitude para center e o nível de zoom para zoom. Se necessário, adicione um ID do mapa usando a propriedade mapId. Como o mapa será rasterizado por padrão, solicite um mapa vetorial especificando a opção "VECTOR". O tipo de mapa vetorial é recomendado para a melhor experiência do usuário, já que oferece melhor fidelidade visual e a capacidade de controlar a inclinação e a direção no mapa.

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js

Confira o código-fonte de exemplo completo

TypeScript

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts

JavaScript

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

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

HTML

<html>

<head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </body>
</head>

<body>
    <div id="map"></div>
</body>

</html>index.html

Testar amostra

JSFiddle.net

Definir e receber propriedades na instância do mapa

Para interagir com a instância do mapa, selecione o elemento que a contém. O código para fazer isso varia dependendo se você usou o elemento gmp-map ou um elemento div.

Receber uma instância de mapa de um elemento `gmp-map`

Para receber a instância do mapa ao usar um gmp-map elemento, use document.querySelector para recuperar uma mapElement instância, conforme mostrado aqui.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

Em seguida, defina as propriedades na instância mapElement:

mapElement.zoom = 8;

A classe MapElement usa a classe Map internamente. Acesse a classe Map usando a propriedade MapElement.innerMap, conforme mostrado aqui:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

Receber uma instância de mapa de um elemento `div`

Ao usar um elemento div, receba a instância do mapa e defina as opções no momento da inicialização:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

Após a inicialização, defina as opções na instância map, conforme mostrado aqui:

map.setOptions({
    zoom: 8,
});

Adicionar um mapa do Google a uma página da Web Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Visão geral

Adicionar um mapa usando um elemento gmp-map

Exemplo de código completo

TypeScript

JavaScript

CSS

HTML

Testar amostra

Adicionar um mapa usando um elemento div e JavaScript

TypeScript

JavaScript

Confira o código-fonte de exemplo completo

TypeScript

JavaScript

CSS

HTML

Testar amostra

Definir e receber propriedades na instância do mapa

Receber uma instância de mapa de um elemento gmp-map

Receber uma instância de mapa de um elemento div

Adicionar um mapa do Google a uma página da Web

Adicionar um mapa usando um elemento `gmp-map`

Adicionar um mapa usando um elemento `div` e JavaScript

Receber uma instância de mapa de um elemento `gmp-map`

Receber uma instância de mapa de um elemento `div`