Skip to main content

Introduction

The @aptuitiv/gmaps library helps you add a Google map to your website and show markers, popups, tooltips, InfoWindows, polylines and other map components.

Inspired by Leaflet.

Goals​

Some of the goals of this library include:

  • Streamline the process of loading the Google Maps Javascript API to display maps.
  • Absract away some of the boilerplate code to display the map and elements on the map.
  • Make it easier to configure the elements on the map.
  • Provide built-in functionality for advanced functionality like marker clustering and bulk management of markers and polylines.
  • Make it easier to display a custom styled popup when clicking on markers or other elements.
  • Make it easier to show a custom styled tooltip when overing a mouse on markers or other elements.

Install​

Download from NPM.

npm install @aptuitiv/gmaps

You will find a copy of the files in node_modules/@aptuitiv/gmaps/dist.

The files that you'd use are:

  • node_modules/@aptuitiv/gmaps/dist/index.esm.js - This is the ESM version of the library and it is used when you use include in your node Javascript code to include this package.
  • node_modules/@aptuitiv/gmaps/dist/index.cjs.js - This is the CommonJS version of the library and it is used when you use require in your node Javascript code to include this package.
  • node_modules/@aptuitiv/gmaps/dist/browser.js - This is the minified version that you should use if you are including this library for use in the browser as a stand-alone script file.

Available objects​

The different objects in the library are available under the global G variable.

You use one of the following functions to set up the object that you need.

Chainable methods​

If an object's method returns an instance of that method, then the method is chainable.

For example:

const icon = G.icon()
    .setUrl('https://mywebsite.com/images/marker.png')
    .setSize([10, 32])
    .setScaledSize([5, 16]);