Sitebuilder Plus: Add Google Maps

Due to changes made by Google, please read carefully to see which method of adding a map suits your site the best.

First Method

If your website was created prior to June 22nd, 2016 AND previously had a published Google Maps element, then you can open the page on which you wish to place the map, and click Insert, then Map.


Drag the map to the desired location on the page. On the right side, you will see the properties editor and can enter the address. You can then publish the page.





Second Method

Another way to add a map is to visit the Google Maps website. In the top left corner, enter the desired address. The map will be displayed and a window will pop up on the left side. Click Share.


A new Window will pop up. You want to click on the embed tab of that window. On the left, you may adjust the size of the map, by clicking and selecting from the desired menu option. Once selected, copy the highlighted code. 


Go to Sitebuilder and paste the code into an HTML box. You can then drag the HTML box anywhere on the page that you like. The map has been added.

Third Method

If your website was created after June 22nd, 2016 OR you never published a Google Map element on your site, there is a little more involved. The advantages of this method is that the maps should load slightly quicker. You will be able to see the map in the editor page, rather than the HTML box element. And lastly, you will be able to view statistics within your Google account concerning any usage of the map. In order to use this method, you must have a Gmail.com or Google Apps for business account. Gmail is free so you can sign up if you don't have an account. If you do not want a Google account, then you will need to use the Second Method above.

Log in to your Google account

In Sitebuilder, open the page on which you wish to place the map, and click on Insert, then on map.


Drag the map to the desired location on the page. On the right side, you
will see the properties editor and can enter the address. Do not publish yet.


Due to new Google requirements, you will be required to get an API key from the Google developers site. Click on Get A Key



On the next window, click Continue.


We advise that you read the terms and conditions of Google user agreement. If you agree, then Agree and Continue


You will need to give the key a name. We advise using your URL of the page with the map. ie: www.domainname.com/page.html. Then hit create.


Copy the key into your clipboard, and click Ok.
O

Click on your Key name.


We will add 2 referrers. This prevents others from using your key. First add www.domainname.com/page.html and click Save. Then add domainname.com/page.html and hit Save again. 


In the end it should look like this.



Paste the code into the Custom API key box in the properties editor and publish.