🚀 Using Google Maps Natively in Angular 20 — Modern vs Traditional Approach ( My first post, criticism is welcome )
Google Maps finally landed natively inside Angular 17+ through the @angular/google-maps package, and Angular 20 makes everything even smoother. But is it always better than the old approach using pure TypeScript, the JS API, and manual DOM manipulation?
In this post, we’ll explore both approaches:
Example 1 — The NEW way: native Angular Google Maps using HTML components
Example 2 — The OLD way: building everything in TypeScript using the Maps JS SDK
You'll learn:
- How to start a project
- How to install Google Maps
- How to configure the API
- How to cluster markers
- How to render 5,000 animated Pokémon markers
- How to add polygons
- Pros and cons of each approach
🧱 1. Create the Angular Project
ng new google-maps-demo --standalone
cd google-maps-demo
📦 2. Install Google Maps Packages
npm install @angular/google-maps
npm install @googlemaps/markerclusterer
🔑 3. Generate Your Google Maps API Key
Create your API key here:
Enable:
- Maps JavaScript API
- Maps Static API
🧩 4. Add Google Maps Scripts to index.html
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
🗺️ 5. Generate the Map Component
ng g c map-new
ng g c map-old
🧭 6. Add Routes
export const routes: Rotas = [
{ path: '', component: MapComponent },
{ path: 'map', component: MapGoogleComponente },
];
🌍 Example 1 — The NEW Native Angular Google Maps (HTML-Based)
This is the modern approach introduced in Angular 17+.
You can declare markers, polygons, clusters directly in the HTML template, using real Angular components.
✅ Advantages
- Super clean and Angular-friendly
- Template-driven
- Reactive updates
- Built-in Map + Marker + Polygon + Cluster components
- Works perfectly with SSR
❌ Disadvantages
- Still evolving and missing some lower-level features
- Less control than the raw JS API
- You depend on Angular's wrappers
📌 Full Component (HTML Version)
map.ts
// basic options for creating a map
options: google.maps.MapOptions = {
center: { lat: -20.20, lng: -40.45 },
zoom: 12,
mapId: 'd03011fdd3c3cf1e5a83529b' // this is a clean map, without markers
};
// you can create your mapId here: [Map Id Google](https://developers.google.com/maps/documentation/javascript/map-ids/get-map-id)
// Thats block prevents errors in SSR.
constructor(@Inject(PLATFORM_ID) platformId: Object) {
this.isBrowser = isPlatformBrowser(platformId);
if (this.isBrowser) {
this.renderer = this.createClusterRenderer();
this.generateRandomMarkers();
}
}
ngAfterViewInit() {
// Wait for the Google Map instance to be created
this.googeMap = this.mapComponent.googleMap!;
// Event: triggers when the map finishes moving or zooming ("idle")
this.googeMap.addListener('idle', () => {
this.handleIdleEvent();
});
// Event: triggers whenever the map bounds change (move/zoom)
this.googeMap.addListener('bounds_changed', () => {
this.handleBoundsChanged();
});
}
createClusterRenderer(): Renderer {
return {
render: ({ count, position }) => {
const color = count > 10 ? '#EE1515' : '#FF0000';
const displayText =
count >= 1000 ? (count / 1000).toFixed(1) + "k" : count;
const fontSize =
count >= 1000 ? 16 : 18;
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50" height="50">
<!-- red top -->
<circle cx="50" cy="50" r="48" fill="${color}" stroke="#222" stroke-width="4"/>
<!-- row div -->
<line x1="2" y1="50" x2="98" y2="50" stroke="#222" stroke-width="4"/>
<!-- white bottom -->
<path d="M 2 50 A 48 48 0 0 0 98 50" fill="white"/>
<!-- center circle -->
<circle cx="50" cy="50" r="18" fill="white" stroke="#222" stroke-width="4"/>
<!-- center text -->
<text
x="50"
y="56"
text-anchor="middle"
font-family="Arial"
font-weight="bold"
font-size="${fontSize}"
fill="#222">
${displayText}
</text>
</svg>
`;
const svgUrl = "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
const content = document.createElement("img");
content.src = svgUrl;
content.style.width = "50px";
content.style.height = "50px";
return new google.maps.marker.AdvancedMarkerElement({
position,
content
});
}
};
}
getRandomPokemonUrl(): string {
const pokemonValues = Object.values(Pokemon);
const random = pokemonValues[Math.floor(Math.random() * pokemonValues.length)];
return `https://img.pokemondb.net/sprites/black-white/anim/normal/${random}.gif`;
}
createPokemonSvg(imageUrl: string): HTMLElement {
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">
<image href="${imageUrl}" x="10" y="10" height="40" width="40" />
</svg>
`;
const parser = new DOMParser();
return parser.parseFromString(svg, "image/svg+xml").documentElement;
}
generateRandomMarkers() {
for (let i = 0; i < 5000; i++) {
const imageUrl = this.getRandomPokemonUrl();
const icon = this.createPokemonSvg(imageUrl);
this.markerPositions.push({
position: {
lat: -20.45 + Math.random() * (-20.25 + 20.45),
lng: -40.45 + Math.random() * (-40.25 + 40.45)
},
iconHTML: icon
});
}
}
map.html
<google-map height="100vh" width="100vw" [options]="options">
<map-marker-clusterer [renderer]="renderer">
@for (pokemon of markerPositions; track $index) {
<map-advanced-marker
[position]="pokemon.position"
[options]="{ content: pokemon.iconHTML }">
</map-advanced-marker>
}
</map-marker-clusterer>
<map-polygon [paths]="polygonPaths" [options]="polygonOptions">
</map-polygon>
</google-map>
🧩 Example 2 — The OLD Google Maps JavaScript SDK (Everything in TS)
This is the classic way: you manually create the map and markers using the JavaScript Maps SDK and manipulate the map directly.
✔️ Advantages
- Complete control of the Google Maps API
- Access to advanced features not yet supported by Angular wrappers
- You can integrate any third-party library easily
❌ Disadvantages
- More verbose
- More DOM manipulation
- Harder to maintain
- Change detection is manual
- Harder to use with SSR
📌 Full Component (TypeScript Version)
map-google.ts
initMap() {
this.map = new google.maps.Map(this.mapContainer.nativeElement, {
center: { lat: -20.20, lng: -40.45 },
zoom: 12,
mapId: "d03011fdd3c3cf1e5a83529b",
});
}
createCluster() {
this.clusterer = new MarkerClusterer({
map: this.map,
markers: this.markers,
algorithm: new SuperClusterAlgorithm({
maxZoom: 15,
radius: 60 // optional — you can adjust
}),
renderer: {
render: ({ count, position }) => {
// Create a render with count and position
}
}
});
}
attachEvents() {
this.map.addListener("idle", () => {
this.showVisibleMarkers();
});
this.map.addListener("bounds_changed", () => {
const zoom = this.map.getZoom();
if (zoom && zoom > 15) {
this.showVisibleMarkers();
}
});
}
// You can use showVisibleMarkers() because you already have full control over
// all marker instances and the clusterer instance. Since you store the markers
// in arrays (this.markers, this.visibleMarkers)and the clusterer is created
// manually, you can directly add or remove markers from the clusterer at any time.
showVisibleMarkers() {
const bounds = this.map.getBounds();
if (!bounds) return;
// 1 — calculate the currently visible markers
const newVisible = this.markers.filter(m => {
if (!m.position) return false;
return bounds.contains(m.position);
});
// 2 — create efficient lists for comparison
const prev = this.visibleMarkers;
// 3 — removed markers (they were visible before but are not anymore)
const removed = prev.filter(
old => !newVisible.includes(old)
);
// 4 — added markers (they were not visible before but are now)
const added = newVisible.filter(
curr => !prev.includes(curr)
);
// 5 — apply changes directly to the clusterer
if (removed.length > 0) {
this.clusterer.removeMarkers(removed);
}
if (added.length > 0) {
this.clusterer.addMarkers(added);
}
// 6 — update the list of visible markers
this.visibleMarkers = newVisible;
}
map-google.html
<div #mapContainer id="map" style="width: 100vw; height: 100vh;"></div>
🔥 Results: 5,000 Animated Pokémon Markers + Clustering
Both approaches generate:
✔️ 5,000 random animated Pokémon GIF markers
✔️ Custom Pokéball SVG cluster icons
✔️ Dynamic bounds detection
✔️ SuperCluster algorithm
✔️ Marker visibility updates
✔️ Polygon rendering (HTML version only)
⚔️ Comparison Table — Which One Should You Use?
🧠 Conclusion
Google Maps now integrates beautifully with Angular 20, and depending on your use case you can choose between:
✅ Native Angular Components (Recommended for most apps)
Cleaner, reactive, simpler, SSR-friendly.
Perfect for dashboards, admin panels, or apps that need maintainability.
✔️ Raw Google Maps JS API
More powerful and flexible.
Perfect for complex GIS systems, map editors, and advanced visualizations.
)
🌟 Advanced Tips & Extra Possibilities
Even with the examples above, you can do much more with Google Maps:
- Multiple polygons and polylines: Add as many shapes as needed, each with its own styling and interactivity.
- MVCArray for better organization: Group polygons, polylines, or markers into MVCArray objects. This allows you to show or hide an entire group without affecting other groups.
- Dynamic management with MVCArray: Create one or more MVCArray instances and control their visibility or contents dynamically for full control. You can push new objects, remove specific ones, or clear the entire array.
- Separation by type or purpose: Organize objects (markers, polygons, polylines) by type, category, or any logical grouping using separate MVCArrays. This helps manage complex maps efficiently.
- Interactive objects: Any clickable object can open an InfoWindow or display details when clicked.
By combining MVCArray groups and InfoWindows, you maintain high performance and clean organization even with thousands of markers or complex shapes.
🔗 Further Reading / Useful Links
Google Maps JavaScript API – InfoWindows
Google Maps JavaScript API – Polygons and Polylines
Google Maps JavaScript API – MVCArray (Layers)
Marker Clustering with Google Maps
Top comments (0)