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

npm install @aptuitiv/gmaps

How you use it from there depends on how your site's Javascript is built. See the installation pages for a bundler, a standalone browser script, or CommonJS — and for the entry points that let you leave out the parts of the library you don't use.

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