Libraries (original) (raw)

To load the JavaScript code for the Maps JavaScript API, you include a bootstrap loader script on your page, of the following form:

The Maps JavaScript API is made up of libraries that are not loaded until you specifically request them. Breaking up components into libraries allows the API to load (and parse) quickly. You only incur the additional overhead of loading and parsing libraries as you need them.

Load additional libraries at runtime, by using the await operator to callimportLibrary() from within an async function. For example:

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

The following code example shows loading both the Map and AdvancedMarkerElement libraries:

TypeScript

// Initialize and add the map let map; async function initMap(): Promise { // The location of Uluru const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );

// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); }

initMap();

JavaScript

// Initialize and add the map let map;

async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });

// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); }

initMap();

Available Libraries

The following libraries are available for use withdynamic library import and direct script loading tag:

• core (google.maps.CoreLibrary)
• maps (google.maps.MapsLibrary)
• maps3d (google.maps.Maps3DLibrary)
• places (google.maps.PlacesLibrary)
• geocoding (google.maps.GeocodingLibrary)
• routes (google.maps.RoutesLibrary)
• marker (google.maps.MarkerLibrary)
• geometry (google.maps.GeometryLibrary)
• elevation (google.maps.ElevationLibrary)
• streetView (google.maps.StreetViewLibrary)
• journeySharing (google.maps.JourneySharingLibrary)
• drawing (google.maps.DrawingLibrary)
• visualization (google.maps.VisualizationLibrary)
• airQuality (google.maps.AirQualityLibrary)
• addressValidation (google.maps.AddressValidationLibrary)

The following bootstrap request illustrates how to add a request for thegoogle.maps.geometry library of the Maps JavaScript API, to the direct script loading tag:

To request multiple libraries, separate them with a comma: