Add Google Maps to your site responsively.
Google Maps™ can drive business right to your front door by providing your address, directions and landmarks for your customers to find you. In today's mobile-driven world, we need directional maps that are responsive to the devices our customers are using. Currently, Google Maps™ are inserted using a non-responsive iframe which when viewed on a mobile phone is difficult to use. Another problem is most map sites do not offer responsive based maps as they all come with fixed height and widths in their markup.
In this article, we will walk you through how to modify the Google Maps™ markup provided and customize it to become responsive within your project!
Adding a responsive map to Site Designer
Open Google maps and enter your location. Click on the Share icon. A pop-up box will appear with the sharing options. Choose Embed a map. A link will appear in the window. Select Copy HTML to save it to your clipboard.
Next, open a new browser tab and go to the website Embed Responsively. Select the media source option Google Maps. Then paste in the Google Map code you saved previously. Click Embed.
Below the map an embed code will appear. Copy that code. You will add this script to your Site Designer page. The code will look something like this example:
Open Site Designer and add an HTML Element to the canvas where you want the map to appear. Go to the Element pane > Enter your HTML for this element > and paste the code into this box.
When you paste the code into the box the element on the canvas will change to say "Live preview not avialable for this element." Adjust the size of your map in Site Designer by going to Styles pane > Layout > Dimensions. You may adjust the width and height for the element.
Finally, to view your fancy responsive Google Map you will need to Preview or Publish your page.
Wanna make a fancy-pants map?
Snazzy Maps offers a free service for Google Workspace customers where you can design stylish maps foryour website. There are endless color options, road types, marker selections and more so you can make something truly unique. Once you design your map style they provide you with the embed code that you can copy and paste into Site Designer using the HTML element.
Level up with the Site Designer help guide.
Site Designer gives you the power to work with CSS visually. These code-free controls allows you to experiment with new styles and layouts without having to be a pro at hand coding. Discover the power of Site Designer and start dragging, droppping, clicking, and sliding your way to an epic website.