Integrate Google Maps in Angular 17 - Two Simple Methods

Before we dive into building something awesome with Angular 17, let’s make sure your development environment is ready. Follow these simple steps:

📌 Step 1: Create a GitHub Repositpry

First, head over to GitHub and create a new repository. This is where you’ll save and manage your project code.

📌 Step 2: Set Up a Workspace

Create a folder (or "workspace") on your computer where you’ll keep all your project files. You can name it anything you like — for example: “my-angular-project”

📌 Step 3: Check Your Node.js Version

Open your terminal or command prompt and type the following command to check if Node.js is installed, and which version you have by using the command in terminal and make sure your node version is 20.19.0 so that it do not make any conflict with Angular 17 .

node -v

If you don’t have Node.js installed, you can download it from nodejs.org.

📌 Step 4: Check Your NPM Version

Similarly, check your NPM (Node Package Manager) version by running the following command in terminal and make sure the version is 10.8.3 or higher.

npm -v

📌 Step 5: Install Angular 17

Now, let’s install Angular CLI (Command Line Interface) version 17 globally on your system. Just copy and paste the following command into your terminal:

npm install -g @angular/cli@17

This will allow you to create and manage Angular projects using simple terminal commands.

📌 Step 6: Verify Angular Installation

To confirm that Angular was installed successfully, run:

ng v

You should see a screen similar to the one below displaying the Angular CLI version along with other environment details.

Once your Angular CLI installation is done, it might ask you a couple of quick questions about autocompletion and privacy policies — feel free to review them. After you confirm those, you’ll see the version details we checked in the previous step.

🚀 Step 7: Create a New Angular Project

Now, it’s time to spin up a new Angular project! Use the command below in your terminal:

ng new google_Maps_v17

During project setup, you’ll be prompted to choose between CSS and SCSS for styling. I selected SCSS, but feel free to pick whichever you're comfortable with.

You’ll also be asked whether you want to enable SSR (Server-Side Rendering) or SSG (Static Site Generation). Since this is a simple Google Maps integration, I chose “No” — but you can decide based on your project needs.

🚀 When Should You Use SSR (Server-Side Rendering)?

✅ Ideal Scenarios for SSR:

• When SEO matters — like for blogs or e-commerce product pages that need to appear in search results.

• When you want a faster initial page load, especially if the app fetches heavy data up front.

• When you need the content to be visible immediately before the user interacts with the UI.

❌ When to Skip SSR:

• If your app is highly interactive, like simple Google Maps implementations.

• If most of your content is rendered using client-side logic.

• If you rely on third-party libraries that might not support SSR well.

  ✅ Once you've answered these setup questions, your new Angular project will be successfully created. You can now see it in your project explorer — ready to go!

📂 Navigate to Your Project

Open your terminal and move into your newly created Angular project using:

cd google_Maps_v17

▶️ Run the Application

Start the development server by running:

ng serve

or simply:

ng s

Your app will now be up and running at: 🌐 http://localhost:4200

🎉 Congrats! You've successfully created your first Angular 17 application! 💪

🗺️ Let's Integrate Google Maps

There are multiple ways to integrate Google Maps into your Angular app.
In this article, I’ll walk you through two easy methods, complete with code snippets you can copy and use directly in your project.

🧭 Method 1: Embed Google Map Using an Iframe

📌 Start by opening Google Maps and search for the location you want to display in your app.

1. Click the Share button.

2. Switch to the "Embed a map" tab.

3. Copy the provided <iframe> code.

This iframe contains your selected location and can be embedded directly into your Angular component's HTML file.

🛠️ Tip: You can customize the map’s size by adjusting the width and height values in the code or through the embed options before copying.

Paste the copied iframe code inside app.component.html like this:

<iframe 
 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3909.5194709006255!2d78.08712837009794!3d11.514545920158975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3babe7cd9efbb5e9%3A0xa796840fda2246f2!2sGK%20FASHION%20DESIGNER!5e0!3m2!1sen!2sin!4v1743343253958!5m2!1sen!2sin" 
 width="600" height="450" 
 style="border:0;" allowfullscreen="" loading="lazy" 
 referrerpolicy="no-referrer-when-downgrade"></iframe>

✅ Wrapping Up Method 1

That’s it! With just a few clicks and a simple iframe, you've embedded a fully functional Google Map into your Angular app. 🗺️

✅ Best for: Quick integrations where you don’t need to dynamically change the location or interact with the map programmatically.

💡 Method 2: Embed Google Map Dynamically Using Angular + DomSanitizer

If you want more control — like changing the map location dynamically through your TypeScript code — this method is for you.

We’ll use Angular’s DomSanitizer to safely embed a dynamic Google Maps URL.

Let’s dive in! 👇

🛠️ Step 1: Update app.component.ts for Dynamic Map Embedding

Open your app.component.ts file and replace its content with the following code:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'google_Maps_v17';
  locationUrl: any;

  constructor(private sanitizer: DomSanitizer) {} // Inject DomSanitizer

  ngOnInit() {
    // Replace this URL with the one from your desired Google Maps location
    const url = `https://www.google.com/maps/embed?pb=!1m18...`;
    this.locationUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

🔐 Why We Use DomSanitizer

Angular considers dynamic URLs a potential security risk, especially when embedding external content. That’s where DomSanitizer comes in — it lets you explicitly trust a URL and bypass Angular's built-in security restrictions.

⚠️ Important: Only use DomSanitizer when you're sure the source is safe and trustworthy — like a URL directly copied from Google Maps.

✅ When Should You Use DomSanitizer?

Use DomSanitizer when you're working with content from trusted, secure sources, such as:

• Embedding external URLs you control — like Google Maps or YouTube videos.

• Applying dynamic styles or HTML that Angular may flag as unsafe by default.

• Displaying rich text content from trusted systems like a CMS or Markdown files.

❌ When to Avoid Using DomSanitizer

Avoid using DomSanitizer when the content comes from unknown or untrusted sources, like:

• User-generated content (e.g., chat messages, comments, forum posts).

• API responses that aren’t validated or sanitized properly.

⚠️ Misusing DomSanitizer can expose your application to XSS (Cross-Site Scripting) vulnerabilities. Use it only when absolutely necessary — and always double-check the data source!

🌍 How to Get the Google Maps Embed URL

To display a specific location on your website, you’ll need to generate a shareable embed link from Google Maps.

Here’s how:

1. Open Google Maps and search for the location you want to show.

2. Click on the “Share” button.

3. Switch to the “Embed a map” tab.

4. Copy the URL from the src attribute inside the iframe code — this is the link you’ll use in your Angular app.

🛠️ You can also customize the map size (small, medium, large, or custom) before copying the link.

🧾 Step 2: Embed the Map in app.component.html

Now, open your app.component.html file and add the following code:

<iframe 
  [src]="locationUrl" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

🛠️ You can customize the size of the map by adjusting the width and height values directly in the code above.

---

I selected the Medium size option while generating the embed code from Google Maps, and the result was a clean, responsive map preview — ready to be zoomed, explored, or clicked for directions! 🗺️✨

🗺️ The result is interactive — you can zoom in, zoom out, and even navigate directly to Google Maps for directions.

🎨 Feel free to customize the styles and tweak the appearance to match your project’s vibe!

📂 Check out the complete project on GitHub:
👉 GoogleMaps Repository

✨ Happy Coding & Happy Learning, folks! 🚀💻

---

“If you found this helpful, drop a ❤️ and follow for more!”