How to Add Google Maps in Weebly?

Maps are used to show your business address on your website in a real manner instead of simple text address. Users can enlarge and view the address in real time and also navigate to Google maps to find the directions or leave a review.

Related: How to use Google Maps in WordPress site.

Add Google Maps in Weebly

Weebly allows you to add maps on your site in following ways:

• Using default Map element
• Using Embed Code element
• Add maps from third-party websites

We will discuss both options in detail in the following sections.

Add Google Maps in Weebly Using Map Element

Map element in Weebly site editor helps to add Google maps on your site and customize the address, size, maker, etc. You can just drag and drop “Map” element and the Google map will be automatically added on the page.

Click on the map to see the following customizing options:

• Address – enter the city to focus the marker on that point on the map.
• Zoom – set the zoom limit by dragging the slider to the required level.
• Width & Height – set the width and height for your map to fit on the page layout. Leave the width to “Auto” for a responsive map aligning automatically to fit the width of the browser.
• Position – set the left, right or center alignment of the map.
• Spacing – set top and bottom margins to leave space between other elements and map on a page.
• Advanced Location – If the address is not accurate you can enter exact latitude and longitude coordinates to place the marker on the accurate place.
• Advanced Display – you can show or hide marker at the address, scale on the map, overview map and map control.

You can choose one of the below options for the pan function under map control:

• Large pan and zoom control
• Small zoom and pan control
• Small zoom control only
• None

In most of the situations the default map is sufficient and recommend to use as it is part of Weebly editor interface.

Embedding or Linking Google Map

Weebly map element offers restricted options and does not allow to embed direction search or street view map. If you are looking for map with more options then follow the below instructions:

• Go to Google Maps site.
• Search and locate the address.
• If you want add the directions between your address and any specific place.
• Click on the navigation menu icon located on top left corner.
• Choose “Share or embed map” option” as shown below:

• Choose the size for your map under “Embed map” tab.
• Copy the iframe code.

• Go to your Weebly site and paste the Google maps code inside an “Embed Code” element.

Adding Google map will drag down the page speed considerably as it will call Google API to load the map. So instead of adding a realtime map, you can just link to your address location on the Google map. In the above process, instead of going to “Embed map” tab, click on the “Share link” tab. Copy the link and you can create hyperlink on Weebly with any anchor text or image.

Clicking on the link will open the Google maps site including directions search.

Embedding Google Maps from Third Party Websites

There are also many third parties offers Google Maps API with better view on the site. For example, you can go to embed Google maps site and provide the options like address, map type, size and zoom to generate the embed code quickly. Paste the embed code inside “Embed Code” element on your Weebly site and showcase your location on the map to your users.