Migrating angular-google-maps / ngMap to modern Angular
angular-google-maps (the ui-gmap directives) and ngMap exposed the Google Maps JavaScript API as AngularJS directives for maps, markers and windows. Both are tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| @angular/google-maps | First-party components from the Angular team: map, markers, info windows, shapes and layers. |
| Google Maps JavaScript API directly | When you use API features the components do not cover; create the map inside a component of your own. |
| Leaflet or MapLibre GL | When you also want to move off the Google Maps platform. |
How to migrate it
- Inventory the map features in use: markers, clustering, info windows, drawing, places autocomplete, directions.
- Load the Maps JavaScript API once with your key, then build one shared map component with google-map and its child components.
- Move marker and event logic from directive attributes to component inputs and outputs, and test with a realistic number of markers.
Watch out. Google deprecated the classic Marker in favour of advanced markers, which require a map ID. Decide which one you use before you migrate every marker.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn