How do I add Google Maps to my website?

  • 0
  • 2
  • Question
  • Updated 1 week ago
  • Answered
  • (Edited)
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.
Photo of Drew N

Drew N, Community Manager

  • 259,094 Points 100k badge 2x thumb

Posted 2 years ago

  • 0
  • 2
Photo of Heike7522

Heike7522

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Google map is not working.
Photo of Mary8111

Mary8111

  • 90 Points 75 badge 2x thumb
How come Homestead gets something that works and finds a way to mess it up? The add a map did work with just a few clicks. And now you have to go through a lot of confusing steps that us non-programmers do not understand and have to lose time and sleep to figure out what to do to accomplish what was easy? Then you say you are helping with instructions, that, by the way, do not work on sight builder plus.  
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,280 Points 10k badge 2x thumb
I am not sure what trouble you are experiencing with the maps element, but I just went into your builder and added a map with an address and it worked fine. What trouble are you running into?
Photo of Mary8111

Mary8111

  • 90 Points 75 badge 2x thumb
It worked fine on the Home page. How ever when adding a map to the shoe area it appears correctly in the edit. How ever when saved and published in does not have the correct  map displayed on the web-sight.  
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 17,280 Points 10k badge 2x thumb
I'm sorry, I'm not sure what you mean by "the shoe area". I see the map on your Home page and your events page and they both seem to be working. I can see the address it is directing to and it is showing properly on the map.
Photo of Desiree3755

Desiree3755

  • 594 Points 500 badge 2x thumb
Hi, I want to add a chat service to my site which requires I add code to the body and head.  How do I do that in the new software?  Thanks.