Elements - Add a map
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
Add a map
To add a map section to your website, follow these steps:
- Hover your mouse over "+ Add content".
- From the drop-down menu, select "Element".
- From the menu on the left, click and drag the "Map" element to your desired position on the website, and then drop the element.
By default, the marker on the map will be your customer's address. You will learn how to customize your new map in the next section.
Customize your map
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, which you'll learn about in the next section.
Further 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 different 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. To add the Google Maps API key in the Website Builder (CMS), go the top menu, hover over "Website", click "SEO / Meta", and enter the API key at the bottom in the field labeled "Google Maps API key". Then click the floppy disk "Save" icon to save your changes.
Within 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 an additional 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.
Be sure to check out our article on Elements in Sitejet for more information on how to efficiently build your site.
In order to avoid any errors, please keep the following points in mind:
- Enter your Google Maps API Key in the "SEO & Details" 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. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to firstname.lastname@example.org .