How to Get Google Map Code for Your Website

Go to Google Maps., Identify a location., Adjust the map to how you want it to be viewed., Create the embed code and share link., Get the code.

5 Steps 2 min read Medium

Step-by-Step Guide

  1. Step 1: Go to Google Maps.

    Open any web browser on your computer and visit the Google Maps website.
  2. Step 2: Identify a location.

    You can use the location button on the lower right corner to set the map to your current location, or you can use the search box on the upper right corner to find another place on the map.

    Finding your current location—Click on the compass button on the lower right corner of the page.

    The map will adjust based on your current location.

    Your current location will be identified by a blue dot on the map.

    Finding another location—Use the search box and type in the location you want.

    A shortlist of possible results will drop down.

    Click on the location you want, and the map will automatically draw to the location you’ve set. , Use your mouse to move the map around, and use the zoom in or out buttons on the bottom right corner of the page to zoom in or out.

    The view you set here will be the view embedded to the code when you share it. , Click on the gear icon on the bottom right corner of the page to bring out a small menu.

    Click on “Share or embed map” from here.

    A small window will appear. , You can either get the exact URL for your map view or get the exact HTML code to embed the map to your website.

    To get the share link, click on the “Share link” tab on the small window.

    You will be shown the exact URL for your map view.

    You can also convert this URL to a shorter one by ticking on the checkbox for “Short URL” above the main URL box.

    Copy either URLs.

    Both will link to the same map.

    To get the embed code, click on the “Embed map” tab on the small window.

    You will be shown a preview of how your map will look like when embedded on a website.

    You can resize your map by selecting size options from the drop-down list.

    When you’re done, copy the whole URL on the URL box.

    This is the exact HTML code you need to paste on your website in order for this map to be displayed correctly.
  3. Step 3: Adjust the map to how you want it to be viewed.

  4. Step 4: Create the embed code and share link.

  5. Step 5: Get the code.

Detailed Guide

Open any web browser on your computer and visit the Google Maps website.

You can use the location button on the lower right corner to set the map to your current location, or you can use the search box on the upper right corner to find another place on the map.

Finding your current location—Click on the compass button on the lower right corner of the page.

The map will adjust based on your current location.

Your current location will be identified by a blue dot on the map.

Finding another location—Use the search box and type in the location you want.

A shortlist of possible results will drop down.

Click on the location you want, and the map will automatically draw to the location you’ve set. , Use your mouse to move the map around, and use the zoom in or out buttons on the bottom right corner of the page to zoom in or out.

The view you set here will be the view embedded to the code when you share it. , Click on the gear icon on the bottom right corner of the page to bring out a small menu.

Click on “Share or embed map” from here.

A small window will appear. , You can either get the exact URL for your map view or get the exact HTML code to embed the map to your website.

To get the share link, click on the “Share link” tab on the small window.

You will be shown the exact URL for your map view.

You can also convert this URL to a shorter one by ticking on the checkbox for “Short URL” above the main URL box.

Copy either URLs.

Both will link to the same map.

To get the embed code, click on the “Embed map” tab on the small window.

You will be shown a preview of how your map will look like when embedded on a website.

You can resize your map by selecting size options from the drop-down list.

When you’re done, copy the whole URL on the URL box.

This is the exact HTML code you need to paste on your website in order for this map to be displayed correctly.

About the Author

B

Brandon Miller

Brings years of experience writing about crafts and related subjects.

70 articles
View all articles

Rate This Guide

--
Loading...
5
0
4
0
3
0
2
0
1
0

How helpful was this guide? Click to rate: