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:
| Input | Description | Example |
|---|---|---|
| center | Sets a point as the center of the map, providing its latitude and longitude coordinates. |
[center]="{lat: 0.0, lng: 0.0}" |
| zoom | Set the initial zoom level on a specific point in maps. |
[zoom]="8" |
| markers | Identifies a location on a map. |
IGMapMarker {
position: { lat: number, lng: number };
title?: string;
icon?: string;
metaData?: any;
} |
| clusterConfig | The number on a cluster indicates how many markers it contains. Notice that as you zoom into any of the cluster locations, the number on the cluster decreases, and you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again. This configuration set the configuration related with the Cluster. [Note: To use this configuration you must have embeded the marker clusterer javascript.] |
IClusterConfig {
gridSize?: number;
maxZoom?: number;
zoomOnClick?: boolean;
imagePath?: string;
imageExtension?: string;
averageCenter?: boolean;
minimumClusterSize?: number;
styles?: IClusterStyle[];
}
IClusterStyle {
url?: string;
height?: number;
width?: number;
anchor?: any[];
textColor?: string;
textSize?: number;
backgroundPosition?: string;
} |
| infoWindowContent | Add content to every marker. Can be a string or a Node |
[infoWindowContent]=""
Or a node:
[infoWindowContent]="content"
<div class="info-window-container" #content>
<app-info-window-content [data]="infoWindowData"></app-info-window-content>
</div> |
| showInfoWindow | Set if the window content shows up with a click or hover the mouse over the marker. |
ShowInfoWindowOptions {
click?: boolean;
hover?: boolean
} |
| mapStyles | Is a collection of selectors and stylers that define how the map should be styled. | |
| groupSelectConfig | It is use to select multiple markers at the same time. |
GroupSelectConfig {
poligonColor?: string;
markerIcon?: string;
markerLabel?: string;
} |
| draggable | used to enable the functionality of selecting groups of markers. |
[draggable]="true" |
| enableControls | Enable or disable Google maps controls. |
{
zoom: true,
streetView: true,
fullscreen: true,
mapType: true,
} |
| debug | In the browser console, show scential information of every input used in the library. |
[debug]="true" |
The library has the next outputs:
| Name | Description | Example |
|---|---|---|
| markerClicked | Emits the data stored in the marker, when click on a marker. | (markerClicked)="someFunction($event)" |
| markerHover | Emits the data stored in the marker, when hover the mouse over marker. | (markerHover)="someFunction($event)" |
| zoomChanged | Emits the actual map zoom level. | (zoomChanged)="someFunction($event)" |
| centerChanged | Emits the actual latitude and logitude | (centerChanged)="someFunction($event)" |
| groupSelected | Emits an collection of markers. This works when are using draggable is true. | (groupSelected)="someFunction($event)" |
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).