A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developers.google.com/maps/documentation/javascript/load-maps-js-api below:

Load the Maps JavaScript API

This guide shows you how to load the Maps JavaScript API. There are three ways to do this:

Use Dynamic Library Import

Dynamic library import provides the capability to load libraries at runtime. This lets you request needed libraries at the point when you need them, rather than all at once at load time. It also protects your page from loading the Maps JavaScript API multiple times.

Load the Maps JavaScript API by adding the inline bootstrap loader to your application code, as shown in the following snippet:

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

You can also add the bootstrap loader code directly to your JavaScript code.

To load libraries at runtime, use the await operator to call importLibrary() from within an async function. Declaring variables for the needed classes lets you skip using a qualified path (e.g. google.maps.Map), as shown in the following code example:

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

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

initMap();

Your function can also load libraries without declaring a variable for the needed classes, which is especially useful if you added a map using the gmp-map element. Without the variable you must use qualified paths, for example google.maps.Map:

let map;
let center =  { lat: -34.397, lng: 150.644 };

async function initMap() {
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 8,
    mapId: "DEMO_MAP_ID",
  });

  addMarker();
}

async function addMarker() {
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: center,
  });
}

initMap();

Alternatively, you can load the libraries directly in HTML as shown here:

<script>
google.maps.importLibrary("maps");
google.maps.importLibrary("marker");
</script>

Learn how to migrate to the Dynamic Library Loading API.

Required parameters Optional parameters Use the direct script loading tag

This section shows how to use the direct script loading tag. Because the direct script loads libraries when the map loads, it can simplify maps created using a gmp-map element by removing the need to explicitly request libraries at runtime. Since the direct script loading tag loads all requested libraries at once when the script is loaded, performance may be impacted for some applications. Only include the direct script loading tag once per page load.

Note: You can call importLibrary once the direct script loading tag has finished loading. Add a script tag

To load the Maps JavaScript API inline in an HTML file, add a script tag as shown below.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>
Direct script loading URL Parameters

This section discusses all of the parameters you can specify in the query string of the script loading URL when loading the Maps JavaScript API. Certain parameters are required while others are optional. As is standard in URLs, all parameters are separated using the ampersand (&) character.

The following example URL has placeholders for all possible parameters:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&loading=async
&callback=FUNCTION_NAME
&v=VERSION
&libraries="LIBRARIES"
&language="LANGUAGE"
&region="REGION"
&auth_referrer_policy="AUTH_REFERRER_POLICY"
&map_ids="MAP_IDS"
&channel="CHANNEL"
&solution_channel="SOLUTION_IDENTIFIER"

The URL in the following example script tag loads the Maps JavaScript API:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>
Required parameters (direct)

The following parameters are required when loading the Maps JavaScript API.

Optional parameters (direct)

Use these parameters to request a specific version of the Maps JavaScript API, load additional libraries, localize your map or specify the HTTP referrer check policy

Use the NPM js-api-loader package

The @googlemaps/js-api-loader package is available, for loading using the NPM package manager. Install it using the following command:

npm install @googlemaps/js-api-loader

This package can be imported into the application with:

import { Loader } from "@googlemaps/js-api-loader"

The loader exposes a Promise and callback interface. The following demonstrates usage of the default Promise method load().

TypeScript 
const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
Note: Read the guide on using TypeScript and Google Maps. JavaScript 
const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

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

See a sample featuring js-api-loader.

The following example shows using loader.importLibrary() to load libraries:

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader
  .importLibrary('maps')
  .then(({Map}) => {
    new Map(document.getElementById("map"), mapOptions);
  })
  .catch((e) => {
    // do something
});
Migrate to the Dynamic Library Import API

This section covers the steps required to migrate your integration to use the Dynamic Library Import API.

Migration steps

First, replace the direct script loading tag with the inline bootstrap loader tag.

Before 
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&callback=initMap">
</script>
After 
<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>

Next, update your application code:

Before 
let map;

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

window.initMap = initMap;
After 
let map;
// initMap is now async
async function initMap() {
    // Request libraries when needed, not in the script tag.
    const { Map } = await google.maps.importLibrary("maps");
    // Short namespaces can be used.
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}

initMap();

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4