@proginnova/ng-map v1.0.1-alpha

NgMap

New update to support with Angular CLI version 16.1.0

How to install

npm install @proginnova/ng-map -S

Then install the package npm install @types/googlemaps.

Getting Started

In the tsconfig.json add the next compiler options:

  "compilerOptions": {
    ...
    "strictPropertyInitialization": false,
    "strictNullChecks": false,
    "noImplicitThis": false,
    "noImplicitAny": false,
    ...
  }

In the module.ts import the library and set the Google api key:

imports: [
    ...
    NgMapModule.forRoot({
      apiKey: {yourApiKey}
    })
]

How to use

This library accept these Inputs:

IGMapMarker {
    position: { lat: number, lng: number };
    title?: string;
    icon?: string;
    metaData?: any;
}

The library has the next outputs:

Example in HTML

<div style="height: 100vh; width: 100%">
  <pgi-ng-map [center]="{lat:9.660880, lng:-84.136653}" [groupSelectConfig]="groupConfig" [mapStyles]="mapStyles" [draggable]="draggable"
    [infoWindowContent]="'Hello'" [showInfoWindow]="{hover:true}" [markers]="markers$ | async" [debug]="false" [enableControls]="enabledControls"
    [defaultMarkerIcon]="'./assets/marker.png'" [clusterConfig]="clusterConfig" (groupSelected)="markerGroupSelected($event)" (markerClicked)="markerSelected($event)"
    [zoom]="5"></pgi-ng-map>
  <button style="position: absolute; bottom:0;left: 0;" (click)="draggable = !draggable">click</button>
</div>

Note: draggable and debug are type boolean. infoWindowContent is data to display in the tooltip (can be a component).