Logo

How to add a location to your website?

How to add a location to your website?

Access the Component Builder

1. Select the website you wish to edit and go to the component builder.

Accessing your website admin
Access the component builder

2. There are 2 methods to add a location to your website.

Create an embedded Google Maps

1. Go to Google Maps to search for your desired location and share.

Searching for a location on Google Maps

2. Copy the map HTML under embed a map.

Copying the HTML to embed a Google Map

3. Under the built-in tab, search for Location.

Searching for the location component

4. Copy it to your components.

Copying the location component

5. You will find the copied component under the Yours tab.

Copied component under Yours

6. Edit the HTML of the component.

Editing HTML of component

7. Paste the copied HTML in step 2, replacing the pre-existing HTML code. Click the tick to input the HTML code.

Pasting HTML code into component

8. Edit the Title and Address. Save to finalise the changes made.

Editing title and address

Create a rich Google Map

1. Under the built-in tab, search for Google Map.

Searching for the google map component

2. Copy it to your components.

Copying the google map component

3. Edit the copied component under the Yours tab.

Editing the copied google map component

4. Get an API key from the Google Cloud Platform Console.

Obtaining your Google Maps API key

5. Add a Google Maps API key to enable the map for use.

Adding your Google Maps API key

6. Obtain the latitude and longitude of a location by right clicking on Google Maps.

Getting the coordinates of a location

7. Add the latitude and longitude for the location marker.

Adding latitude and longitude

8. Use the Place ID Finder to get the place ID.

Copying the place ID

9. Add the place ID if you want to show the place widget. Save to finalise all changes made.

Adding the place ID

Add the created location components to your website

1. Exit the component builder and go to the folder you wish to add the component to. For example, to add the component to your landing page, go to the Home folder to change design.

Access the landing page
Accessing the page builder of the landing page

2. Drag and drop the created component and save it to add it to your website.

Adding the component to your website

Location Component Example

Here are what the components will look like on your website.

Location component (top), Google Map component (bottom)

Frequently Asked Questions (FAQs)

How do I put Google Maps on my website?

There are two main ways to put Google Maps on your website:

  1. Embed Code: This is the easiest method. Visit Google Maps, find your desired location, and click "Share," then "Embed a map." Copy the provided HTML code and paste it into your website where you want the map to appear.
  2. Google Maps Platform API: For more customisation and advanced features, consider using the Google Maps Platform API. This option requires creating an API key and using JavaScript code to integrate the map into your website.

Where do I put a location on my website?

The placement of your location on your website depends on its purpose and how prominent you want it to be. Here are some common options:

  • Footer: This is a popular choice for displaying your location. It's unobtrusive yet still accessible to users who want to find it.
  • Contact Us Page: Including your location on your contact page is a natural fit, especially if you offer local services.
  • About Us Page: Sharing your location on the About Us page can add a personal touch and connect with users who value local businesses.