If you want to customize your Maps app using CSS in your template sheet, this article provides a list of the main snippets of CSS code you might need.
General
Change the font of the tooltip
To change the font of the tooltip, copy the following code and paste it into your Template sheet:
.maps-toolTips-content { font-family: 'montserrat';
}
info To choose another font style, modify the red part of the code. For example: 'modak', cursive;
You need to add the Google font source link if you select a font that isn't installed on your computer.
You need to add the Google font source link if you select a font that isn't installed on your computer.
Example of a Maps app with font style for the titles: 'montserrat';
Change the font size of the tooltip
To change the font size of the tooltip, copy the following code and paste it into your Template sheet:
.maps-toolTip {
font-size: 10px;
}"
info To use another tooltip font size, modify the red part of the code. For example: 20px, 40px.
Example of a Maps app with 10px tooltip font size
Legend
Display a map legend
To display a map legend, copy the following code and paste it into your Template sheet:
.legend { z-index: 1; position: absolute; left: 5px; bottom: 5px; width: 170px; height: 100px; background:white; }
info
- To change the legend size, modify the red part of the code. For example: width: 270px; height: 200px;
- To change the text of the legend, change the text; in our example, 'My legend here' in column B.
Example of a Maps app with map legend