API Dynamic Library Import

A API Dynamic Library Import é uma nova maneira de carregar a API Maps JavaScript e todas as bibliotecas disponíveis. Com o carregamento dinâmico das bibliotecas no tempo de execução, você não precisa se preocupar com as dependências entre os componentes e pode carregar as bibliotecas com base em promessas. Ao usar a API Maps JavaScript, você não precisa utilizar namespaces longos, já que eles ainda são preenchidos.

Usar a API Dynamic Library Import

Para usar a API Dynamic Library Import, adicione uma tag de script ao carregador de inicialização inline à página HTML e o código do tempo de execução para chamar a função importLibrary(). Também é possível utilizar o carregador de scripts simples. Nesse caso, o código do aplicativo precisa aguardar o callback antes de usar a função importLibrary. Copie o código a seguir e inclua a chave de API e todos os parâmetros de inicialização necessários ao aplicativo:

<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_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

Para carregar bibliotecas no tempo de execução, use o operador await para chamar a função importLibrary() em uma função assíncrona, conforme mostrado aqui:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

Parâmetros obrigatórios

  • key: sua chave de API. A API Maps JavaScript só é carregada quando uma chave de API válida é especificada.

  • v: "beta" Para visualizar, é necessário especificar o Canal Beta.

Parâmetros opcionais

  • libraries: uma lista separada por vírgulas de outras bibliotecas da API Maps JavaScript a serem carregadas. Em geral, não é recomendável especificar um conjunto fixo de bibliotecas, mas talvez seja útil para desenvolvedores que querem ajustar o comportamento de armazenamento em cache no próprio site. No entanto, caso seja necessária uma biblioteca que não foi especificada, o carregamento pode ser lento.

  • language: o idioma a ser usado. Isso afeta os nomes de controles, notificações de direitos autorais, rotas de carro e etiquetas de controle, além das respostas às solicitações de serviço. Consulte a lista de idiomas compatíveis.

  • region: o código da região a ser usado. Esse parâmetros muda o comportamento do mapa com base em um determinado país ou território.

  • solutionChannel: a Plataforma Google Maps oferece muitos tipos de exemplo de código para que você comece a usar o produto rapidamente. O Google inclui o parâmetro de consulta solution_channel nas chamadas de API no exemplo de código para acompanhar a implementação dos exemplos mais complexos e melhorar a qualidade da solução.

  • authReferrerPolicy: os clientes do Maps JS podem configurar restrições de referenciadores HTTP no console do Cloud e assim limitar os URLs com permissão para usar uma chave de API. Por padrão, essas restrições são configuradas para que apenas alguns caminhos possam usar uma chave de API. Se qualquer URL no mesmo domínio ou origem puder usar a chave de API, defina o parâmetro authReferrerPolicy: "origin" para limitar a quantidade de dados enviados ao autorizar solicitações da API Maps JavaScript. Quando esse parâmetro for especificado, a API Maps JavaScript só poderá ser carregada se as restrições de referenciadores HTTP estiverem ativadas e uma delas corresponder ao domínio do site atual sem um caminho definido.