Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

19 of 24
HTML FormsHTML IframesHTML MapHTML EntitiesHTML NBSP

🗺️ HTML Google Maps

📌 What is HTML Google Maps?

The <iframe> tag allows embedding Google Maps in HTML. 🗺️

You can display interactive maps with various parameters like location, zoom level, map type, and more—without using JavaScript.

📍 Basic Google Map Embed

You can embed a simple Google Map using an <iframe> with a src URL from Google Maps.

Example:
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

⚙️ Customizing the Map View

You can customize the map appearance using URL parameters:
  • maptype: Choose between roadmap, satellite, hybrid, terrain
  • zoom: Level from 0 (world) to 21 (building)
  • language: Controls map label language
  • region: Sets map bias

🌐 Google Map Iframe Example

Code Example
PREVIEW READY
Loading Editor...
Live Preview

✅ Best Practices

  • ✅ Use lazy loading (loading="lazy") for performance
  • 📐 Use width and height that fit your layout
  • 🚫 Remove border using style="border:0"
  • 🔒 Use referrerpolicy for added privacy
  • 🧭 Avoid using multiple maps on the same page unless necessary
  • ♿ Provide title or aria-label for accessibility

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!HTML Entities