#ngx-google-maps-advanced-marker

A lightweight Angular wrapper component that enables you to use Google's AdvancedMarkerElement from the new Maps JavaScript API. This package replaces the deprecated map-marker from @angular/google-maps and offers more control and customization options using the new Google Maps rendering engine.

🚀 Features

• 💡 Simple integration with the Google Maps JavaScript API
• 🎯 Uses AdvancedMarkerElement from the new maps rendering engine
• 🎨 Fully customizable markers with color, glyphs, borders, and scale
• 🧹 Auto cleanup of markers on destroy
• 🧩 Designed for Angular 17+ with standalone components

📦 Installation

npm install ngx-google-maps-advanced-marker

🛠️ Setup

Make sure you have the Google Maps JavaScript API loaded with the marker library and a valid Map ID (required for AdvancedMarkerElement):

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap"
  async
  defer
></script>

🧑‍💻 Usage

1. Import GmAdvancedMarkerComponent

In your component:

import { GmAdvancedMarkerComponent } from 'ngx-google-maps-advanced-marker';

@Component({
  selector: 'your-component',
  standalone: true,
  imports: [GmAdvancedMarkerComponent],
  ...
})
export class YourComponent {
  map!: google.maps.Map;
}

2. Use in template:

<gm-advanced-marker
  [map]="map"
  [position]="{ lat: 37.7749, lng: -122.4194 }"
  [title]="'San Francisco'"
  [customMarker]="{
    background: '#4CAF50',
    glyphColor: 'white',
    borderColor: '#388E3C',
    glyph: 'S',
    scale: 1.2
  }"
/>

🧾 Inputs

| Input | Type | Required | Description | |------------------|--------------------------------------------|----------|---------------------------------------------------| | map | google.maps.Map | ✅ | The map instance to attach the marker to | | position | google.maps.LatLngLiteral | ✅ | Latitude and longitude of the marker | | title | string | ❌ | Tooltip text shown on hover | | customMarker | google.maps.marker.PinElementOptions | ❌ | Customize glyph, color, border, and scale |

🎯 Example Marker Customization

customMarker = {
  background: '#2196F3',
  glyphColor: '#fff',
  borderColor: '#1976D2',
  glyph: 'M',
  scale: 1.4
};

🧹 Auto Cleanup

The marker is automatically removed from the map when the component is destroyed.

🧪 Compatibility

• Angular 17+
• Google Maps JavaScript API (v3.55+)
• Uses standalone component architecture

📄 License

MIT License © 2025 Amal Jacksman