Article Categories

Selected Reading

How to add Google map inside html page without using API key?

HTML Web Development Front End Technology

Google Maps provides a convenient way to display locations on web pages. While the official Google Maps JavaScript API requires an API key, you can embed Google Maps directly using iframe elements without any authentication. This method allows you to display interactive maps with basic controls and navigation features.

An iframe (inline frame) is an HTML element that embeds another webpage within your current page. Google Maps provides embeddable URLs specifically designed for iframe usage, making it simple to integrate maps without complex setup or API management.

Syntax

Following is the basic syntax for embedding a Google Map using an iframe

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

The key attributes are

src The Google Maps embed URL obtained from Google Maps
width/height Dimensions of the map display area
allowfullscreen Enables fullscreen viewing option
loading="lazy" Improves page load performance by loading the map only when needed

Getting the Google Maps Embed Code

To embed a Google Map, you need to obtain the embed code from Google Maps. Follow these steps

Step 1 Go to Google Maps and search for your desired location.

Step 2 Click the Share button on the left panel.

Step 3 Select the Embed a map tab from the sharing options.

Step 4 Choose your preferred map size (Small, Medium, Large, or Custom).

Step 5 Copy the provided iframe HTML code.

Basic Google Maps Embed Example

Following example shows how to embed a basic Google Map using an iframe

<!DOCTYPE html>
<html>
<head>
   <title>Basic Google Maps Embed</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Our Location</h2>
   <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.309280729802!2d-74.00425368459418!3d40.74844797932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1672915200000!5m2!1sen!2sus"
      width="600"
      height="450"
      style="border:0;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade">
   </iframe>
</body>
</html>

The output displays an interactive Google Map showing the Empire State Building with standard navigation controls

Our Location
[Interactive Google Map displaying Empire State Building with zoom controls, street view option, and fullscreen capability]

Responsive Google Maps Embed

To make the embedded map responsive and adapt to different screen sizes, use CSS to set percentage-based dimensions

<!DOCTYPE html>
<html>
<head>
   <title>Responsive Google Maps</title>
   <style>
      .map-container {
         position: relative;
         width: 100%;
         height: 400px;
         border: 2px solid #ddd;
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .map-container iframe {
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5;">
   <h2>Visit TutorialsPoint Office</h2>
   <div class="map-container">
      <iframe
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.452697041917!2d78.39076592375736!3d17.43803374982052!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9144cdba8c47%3A0x937fe346f411a645!2sTutorials%20Point%20(India)%20Ltd.!5e0!3m2!1sen!2sin!4v1673629212535!5m2!1sen!2sin"
         style="border:0;"
         allowfullscreen=""
         loading="lazy"
         referrerpolicy="no-referrer-when-downgrade">
      </iframe>
   </div>
</body>
</html>

The output shows a responsive map that adjusts to the container width while maintaining a fixed height

Visit TutorialsPoint Office
[Responsive Google Map with rounded corners, border, and shadow effect displaying TutorialsPoint India office location]

Multiple Maps on One Page

You can embed multiple Google Maps on the same webpage to show different locations

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Google Maps</title>
   <style>
      .location-section {
         margin: 30px 0;
         padding: 20px;
         border-left: 4px solid #4285f4;
         background-color: #f8f9fa;
      }
      .map-frame {
         width: 100%;
         height: 300px;
         border: 1px solid #ccc;
         margin-top: 10px;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h1>Our Office Locations</h1>
   
   <div class="location-section">
      <h3>New York Office</h3>
      <p>Visit our New York headquarters in the heart of Manhattan.</p>
      <iframe class="map-frame"
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.309280729802!2d-74.00425368459418!3d40.74844797932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1672915200000!5m2!1sen!2sus"
         allowfullscreen=""
         loading="lazy">
      </iframe>
   </div>

   <div class="location-section">
      <h3>London Office</h3>
      <p>Our European headquarters located near the London Eye.</p>
      <iframe class="map-frame"
         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.540843870494!2d-0.1217893842299686!3d51.50330497963595!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa2!2sBig%20Ben!5e0!3m2!1sen!2suk!4v1672915300000!5m2!1sen!2suk"
         allowfullscreen=""
         loading="lazy">
      </iframe>
   </div>
</body>
</html>

This displays two separate maps showing different office locations with descriptive sections

Our Office Locations

New York Office
Visit our New York headquarters in the heart of Manhattan.
[Google Map showing Empire State Building]

London Office  
Our European headquarters located near the London Eye.
[Google Map showing Big Ben]

Map Embed Parameters

Google Maps embed URLs contain several parameters that control the map display

Parameter	Description	Example Values
pb	Encoded map data including location, zoom level, and map type	Generated automatically by Google Maps
hl	Language for map labels and interface	en, es, fr, de, ja
z	Zoom level (1-21, where 1 is world view and 21 is building level)	10 (city), 15 (streets), 18 (buildings)
t	Map type	m (roadmap), k (satellite), h (hybrid), p (terrain)

Diksha Patro

Updated on: 2026-03-16T21:38:54+05:30

10K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next