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.

• AutocompleteSearchBox: G.autocompleteSearchBox()
• FullscreenControl: G.fullscreenControl()
• Geocode: G.geocode()
• Icon: G.icon()
• ImageOverlay: G.imageOverlay()
• InfoWindow: G.infoWindow()
• Latitude/Longitude: G.latLng()
• Latitude/Longitude Bounds: G.latLngBounds()
• Loader: G.loader()
• Map: G.map()
• MapRestriction: G.mapRestriction()
• MapStyle: G.mapStyle()
• MapTypeControl: G.mapTypeControl()
• Marker: G.marker()
• MarkerCluster: G.markerCluster()
• MarkerCollection: G.markerCollection()
• Overlay: G.overlay()
• PlacesSearchBox: G.placesSearchBox()
• Point: G.point()
• Polyline: G.polyline()
• PolylineCollection: G.polylineCollection()
• PolylineIcon: G.polylineIcon()
• Popup: G.popup()
• RotateControl: G.rotateControl()
• ScaleControl: G.scaleControl()
• Size: G.size()
• StreetViewControl: G.streetViewControl()
• Svg Symbol: G.svgSymbol()
• Tooltip: G.tooltip()
• ZoomControl: G.zoomControl()

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]);