How to add a map in Sitejet
With Sitejet's map element, you can easily add a map section to your website using Google Maps, and you can even place one or more markers on it. In this article, we'll show you how.
Table of contents
Video
This video was recorded in the old UI. We will update this video soon.
Add a map
To add a map section to your website, follow these steps:
- Go to "Elements" on the left Content Panel and click on it.
- Choose "Map" and move it via Drag and Drop into the website
- Now, you will see a basic map in your Website Builder. By default, the marker on the map will be your customer's address.
- After placing the map element, you will then find the settings for it on the left. There are several options that you can set there, including the height, level of zoom, scale, and whether zoom controls and mouse wheel are activated.
Some additional options aren't available until you add a Google Maps API key.
More options with the Google Maps API key
More options become available once you provide a Google Maps API key in the website settings. These include the ability to change the style (many color schemes are available) and type of map (satellite, the default street map, and others), plus the ability to add more than one marker.
To find your Google Maps API key, follow these instructions from Google.
If you like to add the Google Maps API key in the Website Builder (CMS), go to the top menu, and click on more on the right side.
Now, a new menu opens up on the right side. Please click on "SEO & Meta" and add the API in the bottom field. Please save your progress afterwards.
In the "Edit map" panel on the left, under "Map options", you can now set the "Type" and "Style".
For the "Type", there are four options available: "Street Map" (the default), "Satellite view", "Satellite view with streets", and "Terrain map". These "Types" are all compatible, to different extents, with the "Style" options, allowing you to change the look. The only exception to this is the "Satellite view" without street labels.
There are 14 different "Style" choices for the maps. The "Default" option is the usual Google Maps color scheme. The "Colorize" option will allow you to set a series of custom colors to make the map stand out or match your branding colors. If you don't want to go fully custom, but want something to match your website, you can choose one of the many other options available which offer other colors, like the dark "Midnight Commander" style, the light blue "Blue Water" style, or the many grey or monochrome styles. There is also a "No labels" style, and an "Apple Maps" style.
By default, a single marker is added to the map with the company address as the location. But, if there are multiple locations, it may be helpful to also display them on the map. To add another marker, go to the "Marker" section of the "Edit Map" panel, then click the "+ Add" button to the right of "New marker". Then you can simply add the address.
Avoid errors
In order to avoid any errors, please keep the following points in mind:
- Enter your Google Maps API Key in the "SEO / Meta" tab of the website settings
- Make sure that the key you enter is correct - "copy and paste" is usually the safest method
- Give Google valid payment information
- If the location is not displayed correctly, check the address, using Google if necessary
- Clear your browser cache
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.
