How to Embed a Google Map in HTML

Last Updated: July 22, 2019

Having a map of the area you are talking about on your website might be extremely useful. This wikiHow will show you how to embed a Google Map in HTML.

Part 1

Part 1 of 2:

Getting the Google Map Code

1
Go to the location you want to share at https://www.google.com/maps. This will open a map specifically within Google Maps.
2
Click ☰. This is in the left of the browser window.

Advertisement
3
Click Share or embed map. You might see “Link to this map” instead. This option is toward the bottom of the menu.^{[1]
X
Research source}
4
Click the Embed a map tab.
5
Select the size of the map you want. Next to the field of text, you’ll see SMALL, MEDIUM, LARGE, or CUSTOM SIZE. Click the small arrow pointing down to change the map size.
6
Copy the text provided. You can use the keyboard shortcuts Ctrl+C (Windows) or ⌘ Cmd+C (Mac) to copy the text. On a mobile device, you can long-tap the text for the “Select all” and “Copy” options.

Part 2

Part 2 of 2:

Embedding the Google Map Code

1
Open your HTML. You could use a program like Dreamweaver or use a simple word-processing app like Notepad and TextEdit in which you edit your HTML file.
2
Navigate to where you want to embed the Google Map code. In applications like Dreamweaver, you can see what the code translates into on a web page, so you can easily navigate through the HTML code. Without those applications, you will need to know where you are on the web page by looking at the code.
3
Paste the Google Maps code. You can use keyboard shortcuts by pressing Ctrl+P (Windows) or ⌘ Cmd+P (Mac). On a mobile device, you can long-tap the text field and tap “Paste” when the option appears.