NgMap

Angular 21 build (Ivy partial compilation). Package: @proginnova/[email protected]. The component is standalone; NgMapModule.forRoot() still works and provideNgMap() is available for standalone apps.

How to install

npm install @proginnova/ng-map @googlemaps/markerclusterer @types/google.maps @types/supercluster -S

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},
      mapId: {yourMapId} // optional, see "Advanced markers" below
    })
]

Markers: advanced vs classic (1.2.0)

google.maps.Marker is deprecated by Google, so since 1.1.0 the library renders google.maps.marker.AdvancedMarkerElement (migration guide). Advanced markers need a Map ID, and a map with a Map ID ignores JSON mapStyles, so the library has two modes:

| Mode | When | mapStyles | | --- | --- | --- | | advanced | mapId given, or no mapStyles | ignored (one console.warn); style the Map ID in the Cloud console | | classic (google.maps.Marker, map without Map ID) | mapStyles set and no mapId | applied |

The choice is automatic and fixed when the map is created. Override it with the [advancedMarkers] input or forRoot({ apiKey, advancedMarkers }): true forces advanced, false forces classic. The library also falls back to classic markers (with a warning) if the marker library is not loaded. Inputs, outputs, events and hover/click behave the same in both modes. What changes for you with advanced markers:

• Map ID. Advanced markers need a Map ID. Pass mapId in NgMapModule.forRoot({ apiKey, mapId }) (or provideNgMap), or per map with the optional [mapId] input (the input wins). If you pass none, DEMO_MAP_ID is used, which is only for development: create your own Map ID in the Google Cloud console for production.
• mapStyles and Map IDs. A map with a Map ID ignores JSON styles; style the Map ID in the Cloud console (Cloud-based maps styling) instead. If you rely on mapStyles, simply do not pass a mapId and classic markers are used (see above). The library logs an error if Google reports that advanced markers are not available for the Map ID / key.
• Script loading. The script is now loaded with loading=async&libraries=marker&v=weekly and the library waits for importLibrary('maps') and importLibrary('marker') before creating the map. If you load the Maps script yourself, include libraries=marker (or import the marker library) before using the component.
• Hover. Advanced markers have no hover events; markerHover / showInfoWindow.hover are driven by DOM mouseover / mouseout on the marker element. Click uses gmp-click (markers are gmpClickable).
• Marker model. IGMapMarker accepts position, title, icon (url), metaData and, new and optional, label (string or { text, color?, fontSize? }) and zIndex. The icon is drawn as an image (label centered on top); without an icon the default Google pin is used (label as its glyph). icon objects with url and scaledSize/size are also accepted. Cluster icons keep using imagePath / styles[].url|width|height|textColor|textSize and the default blue circle, and are now centered on the cluster position.
• Types. NgMapService.isMarkerInbound, setMarkersSelectedByRectange and setMarkerSelected now take google.maps.marker.AdvancedMarkerElement instead of google.maps.Marker. Inputs, outputs and selectors are unchanged.

How to use

This library accept these Inputs:

	[center]="{lat: 0.0, lng: 0.0}"

	[zoom]="8"

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

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]="" 
  
Or a node:
  
[infoWindowContent]="content"
  
<div class="info-window-container" #content>
	<app-info-window-content [data]="infoWindowData"></app-info-window-content>
</div>

ShowInfoWindowOptions { 
  click?: boolean;
  hover?: boolean
}

	[mapId]="'YOUR_MAP_ID'"

MapTypeStyle

	[advancedMarkers]="false"

GroupSelectConfig {
    poligonColor?: string;
    markerIcon?: string;
    markerLabel?: string;
}

[draggable]="true"

{
	zoom: true,
	streetView: true,
	fullscreen: true,
	mapType: true,
}

[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). If infoWindowContent is not set, the tooltip (click or hover) shows the marker title; with neither, no tooltip is opened. Hover is detected on the marker's content element (mouseenter/mouseleave), and clusters get a pointer cursor, a count tooltip and a slight zoom on hover.