Map Loader for Google Maps Platform JavaScript API v3

Description

Automatically loads a Google map into your website with a few lines of JavaScript or TypeScript. You provide the ID of the div where you want the map initialized or appended to, your settings for what the map looks like, and optionally your settings for loading the Maps JS API, and this module handles the rest.

Loading of the Google Maps Platform JavaScript API is taken care of for you asynchronously courteousy of @googlemaps/js-api-loader.

NPM

Available via NPM as the package @googlemaps/map-loader

Example

Set map loader options

import { GoogleMap } from 'map-loader';

const googleMapsAPIKey = "YOUR API KEY";

/* Options for how the map should initially render. */
const mapOptions = {
  center: {
    lat: 47.649196,
    lng: -122.350384
  },
  zoom: 12
}

/* Options for loading the Maps JS API. */
const apiOptions = {
  version: 'weekly',
  libraries: ['places']
}

/*
 * Set ID of the div where the map will be loaded,
 * and whether to append to that div.
 */
const mapLoaderOptions = {
  apiKey: googleMapsAPIKey,
  divId: 'google_map',
  append: true, // Appends to divId. Set to false to init in divId.
  mapOptions: mapOptions,
  apiOptions: apiOptions
};

Load the map:

// Instantiate map loader
const mapLoader = new GoogleMap();

// Load the map
mapLoader
  .initMap(mapLoaderOptions)
  .then(googleMap => {
    // returns instance of google.maps.Map
  });

Or if you like, with async/await

// Instantiate map loader
const mapLoader = new GoogleMap();

// Load the map
const await googleMap = mapLoader.initMap(mapLoaderOptions);

Documentation

If you're using TypeScript, the map loader exports interfaces for MapLoaderOptions and MapsJSAPIOptions. Options for base map settings are provided courteousy of google.maps.MapOptions in @types/googlemaps.

MapLoaderOptions

Property	Type	Description
apiKey	string	Your API key. For information on generating an API key, see How to generate and restrict API keys for Google Maps Platform.
divId	string	The ID of the div where you want the map initialized or appended.
mapOptions	google.maps.MapOptions	Settings for how the map should appear. For a complete list of map options, see google.maps.MapOptions.
apiOptions	MapsJSAPIOptions	Setting for loading the Maps JavaScriptAPI. For a complete list of API options, see MapsJSAPIOptions.
append	boolean	Optional. Defaults to false. Sets whether to initialize the map in or append to divId.

MapsJSAPIOptions

Property	Type	Description
version	string	Optional. Defaults to weekly. Version of the Maps JS API to load. For more information on supported values, see Release channels and version numbers.
libraries	Array	Optional. Additional Maps JS API libraries to load. Supported values are drawing, geometry, places, visualization.
language	string	Optional. Defaults to en. The language code of the language to localize the map to. For more information on supported values, see supported languages.
region	string	Optional. Defaults to us. Sets the Unicode region subtag identifier of the region to localize the map to. For more information on supported values, see Region localization.

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.