nggm (under construction)

Just Maps JavaScript API wrapper for use with Angular.

Examples

• Adding Controls to the Map.

• Marker directives.

• TODO…

Setup

1. Install

   npm install nggm

2. Add <script> width API key.

   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

   It should be located above the place of loading the main scripts.

3. Import required module:

   • GmCommonModule
   • GmControlModule
   • GmInfoWindowModule
   • GmMapModule
   • GmMarkerModule

<gm-map>

Import

import {GmCommonModule, GmMapModule} from 'nggm';

API

You can use any Map methods with template reference variables.

<gm-map #map></gm-map>
<button (click)="map.panBy(10, 20)">pan</button>

Tokens

• GM_MAP_OPTIONS - provide default MapOptions in Map constructor.

Directives

~~Strikethrough~~ directives have not yet been implemented.

| Directive | MapOptions | Map | | :------------------------- | :---------------------------- | :----------------------------------------------------------------------------------------------- | | [(gmCenter)] | MapOptions.center | ~~Map.getCenter~~ ~~Map.setCenter~~ Map.center_changed | | ~~[(gmClickableIcons)]~~ | MapOptions.clickableIcons | ~~Map.getClickableIcons~~ ~~Map.setClickableIcons~~ clickableicons_changed | | [(gmDraggable)] | MapOptions.draggable | draggable_change | | ~~[(gmHeading)]~~ | MapOptions.heading | ~~Map.getHeading~~ ~~Map.setHeading~~ Map.heading_changed | | ~~[(gmMapTypeId)]~~ | MapOptions.mapTypeId | ~~Map.getMapTypeId~~ ~~Map.setMapTypeId~~ maptypeid_changed | | ~~[(gmStreetView)]~~ | MapOptions.streetView | ~~Map.getStreetView~~ ~~Map.setStreetView~~ streetview_changed | | ~~[(gmTilt)]~~ | MapOptions.tilt | ~~Map.getTilt~~ ~~Map.setTilt~~ Map.tilt_changed | | [(gmZoom)] | MapOptions.zoom | ~~Map.getZoom~~ ~~Map.setZoom~~ Map.zoom_changed | | not needed | | Map.fitBounds | | ~~(gmBoundsChange)~~ | | Map.getBounds Map.bounds_changed | | not needed | | Map.getDiv | | ~~(gmProjectionChange)~~ | | Map.getProjection Map.projection_changed | | not needed | | Map.panBy | | not needed | | Map.panTo | | not needed | | Map.panToBounds | | (gmClick) | | Map.click | | (gmDblclick) | | Map.dblclick |

gmControl=""

TODO doc

<gm-marker>

TODO doc

<gm-info-window>

TODO doc

<gm-polyline>

Not implemented

<gm-polygon>

Not implemented

<gm-circle>

Not implemented