Graphics Embedding a Map

The fastest way to put a map on a web page is to embed a provider's ready-made map inside an iframe, with no API key or account required.

Two Ways to Put a Map on a Page

Any time you want to show a location on a website, you have two broad options: embed a ready-made map from a mapping provider, or load a full mapping library and drive the map yourself with JavaScript. This page covers the first option, which is by far the quickest way to get a working, interactive map onto a page.

The Iframe Embed

Google Maps, like most mapping providers, lets you generate a small block of HTML that displays a pannable, zoomable map inside an <iframe>. Because the map is rendered entirely by the provider's own servers inside a sandboxed frame, you don't need to register a developer account or supply an API key just to display it — you only need the embed snippet.

Open Google Maps in a browser and search for the place you want to show.
Click the Share button, then switch to the "Embed a map" tab.
Pick a frame size from the dropdown, or leave the default.
Copy the <iframe> snippet that Google generates.
Paste the snippet into your page's HTML wherever the map should appear.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

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

</body>
</html>

Note: The loading="lazy" attribute tells the browser to skip downloading the map until it scrolls into view, which keeps pages with several embedded maps fast.

Making the Embed Responsive

An iframe with a fixed width and height won't resize with its container, so on a narrow phone screen it either overflows or leaves awkward gaps. The usual fix is to wrap the iframe in a container that controls its own aspect ratio, then stretch the iframe to fill that container completely with absolute positioning.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div style="position:relative;overflow:hidden;aspect-ratio:16/9;">
  <iframe
    src="https://www.google.com/maps/embed?pb=..."
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    loading="lazy">
  </iframe>
</div>

</body>
</html>

Feature	Iframe Embed	JavaScript API
Setup	Copy-paste HTML, no account needed	Requires an API key, billing account, and a script tag
Customization	Fixed pin, provider's default styling	Custom markers, custom map styles, full control
Interactivity from your code	None — it's a sandboxed frame	Full — you can respond to clicks, move markers, draw shapes
Best for	A simple "here's our office" map	Store locators, route planners, live dashboards

The iframe embed covers the vast majority of "just show a location" needs with almost no effort. Reach for the JavaScript API only when you need the map itself to react to your code — for example, plotting markers from a database, filtering pins by category, or drawing a delivery route. That's the subject of the next lesson.

Keep Going

Graphics Interview QuestionsPractice real questions asked for Graphics Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to Graphics and tweak your resume