About @googlemaps/js-api-loader

The npm package "@googlemaps/js-api-loader" serves as an essential tool for developers looking to integrate Google Maps into their web applications efficiently. This node module acts as a wrapper for the Google Maps JavaScript API, simplifying the process of loading and using the API in the browser. By managing the loading of the API, it ensures that developers can focus on building rich, interactive maps without worrying about the underlying complexities of script management and initialization. The loader supports various features of the Google Maps API, including map displays, location searches, and route planning, making it a versatile tool for projects requiring geolocation services.

To incorporate Google Maps into your project with ease, you can use the command "npm install @googlemaps/js-api-loader". This command installs the loader into your project, allowing you to utilize all the features of the Google Maps JavaScript API without directly handling the script tags. The installation process is straightforward, making it accessible even for those with minimal experience in web development. Once installed, the module provides a promise-based API to load the necessary Google Maps libraries asynchronously, ensuring that your application's load time is optimized and that resources are loaded only when needed.

googlemaps npm packages

Find the best node modules for your project.

Search npm

@googlemaps/js-api-loader

Wrapper for the loading of Google Maps JavaScript API script in the...

@googlemaps/markerclusterer

Creates and manages per-zoom-level clusters for large amounts of markers...

@googlemaps/google-maps-services-js

Node...

@googlemaps/url-signature

Sign a URL for Google Maps Platform requests...

@googlemaps/jest-mocks

[![npm](https://img.shields.io/npm/v/@googlemaps/jest-mocks)](https://www.npmjs...

@googlemaps/markerwithlabel

[![npm](https://img.shields.io/npm/v/@googlemaps/markerwithlabel)](https://www.npmjs...

@googlemaps/three

[![npm](https://img.shields.io/npm/v/@googlemaps/three)](https://www.npmjs...

Dependencies

Core dependencies of this npm package and its dev dependencies.

fast-deep-equal, @babel/preset-env, @babel/runtime-corejs3, @rollup/plugin-babel, @rollup/plugin-commonjs, @rollup/plugin-node-resolve, @rollup/plugin-terser, @rollup/plugin-typescript, @types/google.maps, @types/jest, @types/selenium-webdriver, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, core-js, eslint, eslint-config-prettier, eslint-plugin-jest, eslint-plugin-prettier, geckodriver, jest, jest-environment-jsdom, prettier, rollup, selenium-webdriver, ts-jest, typedoc, typescript

Documentation

A README file for the @googlemaps/js-api-loader code repository. View Code

Google Maps JavaScript API Loader

Description

Load the Google Maps JavaScript API script dynamically. This takes inspiration from the google-maps npm package but updates it with ES6, Promises, and TypeScript.

Install

Available via npm as the package @googlemaps/js-api-loader.

npm i @googlemaps/js-api-loader

Alternatively you may add the umd package directly to the html document using the unpkg link.

<script src="https://unpkg.com/@googlemaps/js-api-loader@1.x/dist/index.min.js"></script>

When adding via unpkg, the loader can be accessed at google.maps.plugins.loader.Loader.

TypeScript

TypeScript users need to install the following types package.

npm i -D @types/google.maps

Documentation

The reference documentation can be found at this link. The Google Maps JavaScript API documentation is the authoritative source for the loader options.

Example

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

const loader = new Loader({
  apiKey: "",
  version: "weekly",
  libraries: ["places"]
});

const mapOptions = {
  center: {
    lat: 0,
    lng: 0
  },
  zoom: 4
};

Using a promise for a specific library.

// Promise for a specific library
loader
  .importLibrary('maps')
  .then(({Map}) => {
    new Map(document.getElementById("map"), mapOptions);
  })
  .catch((e) => {
    // do something
  });

Using a promise for when the script has loaded.

// Promise
loader
  .load()
  .then((google) => {
    new google.maps.Map(document.getElementById("map"), mapOptions);
  })
  .catch(e => {
    // do something
  });

Alternatively, if you want to use a callback.

// Callback
loader.loadCallback(e => {
  if (e) {
    console.log(e);
  } else {
    new google.maps.Map(document.getElementById("map"), mapOptions);
  }
});

View the package in action here.

Support

This library is community supported. We're comfortable enough with the stability and features of the library that we want you to build real production applications on it.

If you find a bug, or have a feature suggestion, please log an issue. If you'd like to contribute, please read How to Contribute.