Add an image header to an infowindow

Adding an image header to an infowindow


Do you want your infowindow to display an image when a map feature is clicked? In the Spotzi Mapbuilder this is possible by adding an image header to your infowindow. In this example we will add an image of the Sheraton Times Square in New York to our map.

In this tutorial we will show you how to add an image header to an infowindow and how to change the image header in an infowindow.

Adding an Image Header to a Map

Add an image to the infowindow


To display an image in the infowindow you first have to add a column to the table that belongs to the map. This column is used to save the image URL. After that you can enable the image header in the map.

Adding an Image Header to a Map

2. Add a column to the dataset by clicking the ADD COLUMN button in the lower right corner.

Adding an Image Header to a Map

3. Give your column a name and press enter to confirm. Make sure that your new column is of type string.

Adding an Image Header to a Map

4. Double click the cell you want to add an image URL to. A typing screen will open. Enter your image URL in the screen and press SAVE to confirm. In this example we will add a picture of the Sheraton Hotel in Times Square.

Adding an Image Header to a Map

5. After you have saved your changes, go back to your map and and click on edit infowindow. Select the image header template from the drop down menu and activate the image URL you just added. Make sure that this field is the topmost field by dragging it to the top of the list.

Adding an Image Header to a Map
6. Press APPLY to confirm.
Adding an Image Header to a Map

7. Great! You have added an image to the infowindow.

Adding an Image Header to a Map

Changing the image header


1. If you want to change an image you have previously added  you have to edit the data of the map feature in question. Press the EDIT DATA button in the infowindow.

Adding an Image Header to a Map

2. Now the edit data screen will pop up on the left side. Here you can easily change the image URL in of that particular feature. After you added a new URL, press APPLY to confirm.

Adding an Image Header to a Map

3. You have successfully changed the image of your infowindow.

Adding an Image Header to a Map