Display a Google map on your website

Google maps is a great online cartography service, adding a Google map to your website is one of the website creation tools built-in to your site manager.

Important ! Since June 2016, it is necessary to put in an API key to display a Google Maps on the website. To create a key and to integrate it into your manager, follow the steps of the tutorial to enable Google Maps API.

Add a map to a page using the Google maps widget

The Google maps widget is designed to make it easy to add a map to your site. You can add to a page (created in the Pages add-on) with a few clicks.

Start by editing the page to which you’ll add the map (or create a new one), from the Pages > Manage pages menu. Add a new content block to the page, or a new column to an existing page block. Select the Google map widget, and then click Configure:

enter the address to be displayed on the map
add an optional description text – the text will be displayed in a “bubble” attached to the address on the map
choose the display mode for the map on your site: it can be displayed as a fully interactive map, with different views and zoom, or as a fixed image
set the height for the map (the width is that of the column or content block in which you display the map)

Save your changes, and finally the page itself.

Adding a map to other site pages

If you need to add a map to other site content, like the top section of a contact form, or a store or photo album category page, you won’t be able to use the map widget. Create your map directly on the Google maps website, by searching for its address. Once you’ve localized the map, click the Link button (1) to copy the HTML map code. Google maps is a great interactive tool and now it is easier than ever to add a map to your website. Begin by creating your map on Google with the multiple destinations

Click on menu icon. A menu will drop-down, then click on Share or embed map. A new pop-up window will appear
Click on the Embed map. From this screen, you can change the size of the map small, medium, large, or a custom size.
After choosing the size, copy the code HTML
Verify that you have selected the source button in the block you want to edit
Paste this code in the desired content block to the page or column to an existing page block.

Save your changes! For a demo of what a map with multiple destinations will look like on a page click here

Add a map to a side menu using the Google maps widget

Adding a map to your side menu is just as simple as adding it to a page. Head to Settings > Menus, then:

add a new widget to the side menu
choose the Gadgets widget category
select Google maps

and follow the steps outlined above to add the map address, optional description text and set the height of the map (the menu map will be as wide as your site menu).

Don’t forget to save your menu changes once you’ve configured and saved the menu widget.

Adjusting the map size on the Google maps site

If you’d like to personalize the default map size (425 x 350 pixels), click the Customize and preview embedded map link, and copy the code generated automatically once you’ve set the map dimensions.

Once you’ve created the map code, simply edit the page on your site to which you’d like to add the map, and paste the map HTML code via the HTML button of the visual editor toolbar, then save your changes.