The content element Google Maps allows you to integrate a dynamic map in just a few steps. The user can move the map, zoom in and out, view it in full-screen mode or in Street View. Whether a marker is set or a description is inserted can be set individually.
Type, Column & Header
The Type field shows you in which content element you are currently working. The Column field indicates where the content element is located. You enter the Header in the free field and specify the layout of the title in the Type field below.
Latitude, Longitude & Address
The coordinates or the address you enter here are displayed in the middle of the map (however, there is no marker for the exact location yet).
Zoom Level, Width & Height
You can determine how much the map should be displayed enlarged or reduced by using the zoom function. The default setting is 13. The screenshot below shows how this level looks in the frontend. With the width and height you can set the size of the area around the specified address or coordinates. The specifications can be made in pixels or percent. The default setting is 100 % width and 200 px height. In a 2-column map the map would take 100 % of the width of a column.
By default, the controls are not activated for the user. If you want your site visitors to see the buttons for zoom in and zoom out as well as for Google Street View, you must check this box.
You use markers to label a location. You can also define several markers on a map, for example to show main and outbuildings or to point out prominent houses in the area for better orientation.
To create or edit a marker, proceed as follows:
- Under Marker, click Create new.
- Enter the coordinate or latitude and longitude or the address.
- The address also serves as the name of the marker. If you enter latitude and longitude, you can use the address field to name the marker.
- Upload a custom icon for the marker and link it by clicking on Create new relation.
- By default, Google uses a red marker, as shown in the screenshot.
- To make a marker no longer visible in the frontend, simply activate the checkbox under Hide marker. When you remove the check mark, the marker will be visible again.
- With this option, unused markers do not need to be deleted and can be used again at any time.
- Enter information about the set location into the text editor and specify whether the text appears when the page is loaded or only when the marker is clicked. With a check mark at Activate, the info box will appear without a click.
Here you can see a screenshot of a map with controls, a marker and the width of 100 % and a height of 200 px.