Add Google Maps to Your Google Site
Adding a Google Map to your Google Site helps visitors find your location quickly and gives your site a professional touch. The process is straightforward and works well with Google Sites' built-in embed feature.
TL;DR:
- Use Google Maps' embed code to add interactive maps to your Google Site
- Copy the embed code from Google Maps and paste it into your site's embed section
- Customize the map view before embedding to show exactly what you want
- Test the map on mobile devices to ensure it displays properly
- Add multiple locations by creating markers before generating the embed code
Getting Your Map Embed Code
Start by opening Google Maps in your browser and searching for the location you want to display. Once you've found the right spot, click the "Share" button on the left panel. You'll see two tabs – click on "Embed a map" rather than "Send a link".
Google will show you a preview of your map along with an HTML code snippet. You can adjust the map size using the dropdown menu (small, medium, large, or custom). The default medium size works well for most Google Sites layouts.
Copy the entire HTML code that appears in the text box. This code contains everything needed to display your interactive map.
Adding the Map to Your Google Site
In your Google Sites editor, navigate to the page where you want the map to appear. Click the "+" button to add content, then select "Embed" from the menu. Choose "Embed code" from the options that appear.
Paste the HTML code you copied from Google Maps into the text box. Click "Next" and Google Sites will generate a preview of your map. If everything looks correct, click "Insert" to add it to your page.
You can resize the map by dragging the corners of the embed box, and move it around your page like any other content element.
Customizing Your Map Display
Before copying the embed code, you can customize how your map appears. Zoom in or out to show the right level of detail for your visitors. If you're showing a specific business, zoom in close enough that the surrounding streets are visible but not so far that the location gets lost.
You can also change the map view by clicking the layers icon in Google Maps. Switch between the default map view, satellite imagery, or terrain view depending on what works best for your location.
For businesses with multiple locations, add markers to your map before generating the embed code. Search for each location and save them to create a custom map with all your spots marked.
Making Your Map Mobile-Friendly
Google Maps embeds are responsive by default, but it's worth checking how they look on mobile devices. Use the preview function in Google Sites to see how your map displays on different screen sizes.
If your map appears too small on mobile, consider the context of your page. Maps work best when they have enough space to be useful – a tiny map that's hard to interact with won't help your visitors.
Common Issues and Solutions
Sometimes the embed code doesn't work immediately. If you see an error message, double-check that you've copied the complete HTML code from Google Maps. Missing characters at the beginning or end will prevent the map from loading.
If your map shows the wrong location, go back to Google Maps and make sure you're viewing the exact spot you want before copying the embed code. The embed will show whatever was displayed in your Google Maps window.
For maps that load slowly, the issue is usually related to your internet connection or Google's servers. The embedded map loads directly from Google, so performance depends on their service rather than your Google Site.
FAQs
Can I update the map location after embedding it?
No, you'll need to go back to Google Maps, get new embed code for the updated location, and replace the old embed code in your Google Site.
Why isn't my map showing up on the published site?
Check that you've published your site changes after adding the map. Also verify that the embed code is complete and hasn't been cut off when copying.
Can visitors get directions from my embedded map?
Yes, the embedded map includes all standard Google Maps features like directions, street view, and the ability to open the full map in a new tab.
Jargon Buster
Embed Code: HTML code that displays content from another website (like Google Maps) on your own site
Responsive: Content that automatically adjusts to look good on different screen sizes
HTML: The code language used to create web pages and embed content
Markers: The pins or icons that show specific locations on a map
Wrap-up
Adding Google Maps to your Google Site takes just a few minutes and makes your site more useful for visitors. The key is getting the map view right before you copy the embed code, since that's exactly what will appear on your site.
Test your map on different devices to make sure it's easy to use, and remember that you can always update it by replacing the embed code with a new one from Google Maps.
Ready to build more engaging websites? Join thousands of other creators at Pixelhaze Academy and master the tools that matter.