Demo

Demo 5 - Custom Info Window

Scenario: Prepare a map of imagine apple store and present in custom info window.

This is a simple scenario show the imagine apple store information on map with customizable info window.

List Imagine apple store branches in a Google Sheet as shown below

Map My Sheet - Demo Spreadsheet

Let's start to configure the map settings

Name the map as required.
Select the required sheet tab.
Select the required map type.
Select the required zoom level.
Switch on Clustering if required.(Clustering combines group of markers in to one marker with the count as label)
Switch on Refresh automatically if required.

Choose type of location as "Address" and Choose the "Address" field from the Google Sheet.
To Map your Data Longitude and latitude is Mandatory.
if you already have longitude and latitude then just select the header wherever it is necessary.
else click on button which has plus(+) symbol to add latitude and longitude in your Google sheet.

Select the required marker colour.
Select the required animation.
Click Add Marker to add more marker.
Select the required Marker.(A marker label is a letter or number that appears inside a marker.)

Let's customize the Info Window

Info Window takes by default all the Sheet columns values as elements of Info Window.
The Info Window appears when you click on the marker in the Google Map.
If you want to see the info window on-mouse over just click on the check box "Show info window on mouseover"

Click the "Add More to Info Window" button to add an element to the info window.
For each info window element, there are these properties. Using these, you can customize the type, color, font, and size.

Info window elements have five types: Text, URL, Image, Date, and Date and Time. By default, the type will be Text.

Text
- To display text on the info window, just select the type as Text, and choose the field in which column values you want to show text on the info window.

Url
- To display any URL on the info window, just select the type as Url, and choose the field in column values you want to show for the URL on the info window.

Image
- To display any image on the info window, just select the type Image, and choose the image height and width.
- Choose the field in which column values you want to show for images on the info window.

Date
- To display any date on the info window, just select the type Date, and choose the date format.
- Choose the field in which column values you want to show for date on the info window.

Date and Time
- To display any date and time on the info window, just select the type DateTime, and choose the date and time format.
- Choose the field in which column values you want to show for date and time on the info window.

Additionally, there is a color picker available to select the color for your information window element.

If desired, you can select a font style. There are several standard font types available for selection.

You can configure any number of elements to be shown in the Info Window. Use the vertical three dots to choose the field names from the list of Google Sheet column names.
Once configured an info window click the tick icon to save and close the info window.
If you wish to edit an info window, hover over the info window element to reveal the edit icon for each element. Simply click the icon and edit as needed.
If you don't want some info window element just click on the trash button that will remove from your info window.
After configuring the Info Window, do not forget to save.
Change the order of the Info window as required.