@googlemaps/map-loader
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

Test codecov TypeScript Apache-2.0

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.

Readme

Keywords

Package Sidebar

Install

npm i @googlemaps/map-loader

Weekly Downloads

4,625

Version

0.2.0

License

Apache-2.0

Unpacked Size

568 kB

Total Files

32

Last publish

Collaborators

  • kenough
  • wangela
  • google-wombot