simplemaps

Add images to the popup | Documentation

A common question is how to add images to the popups or tooltips that appear on hover. For example, we often include an image of a frog in the popup on our website:


Adding an image like this to your popup is straightforward using a little HTML. Follow these steps:

  1. Upload your image to the map_images folder.

  2. Add the HTML for an image to the state_description property in the main_settings of the mapdata.js file: state_description: '<img width="104" height="110" style="float:left; margin-right: 10px;" src="map_images/frog.png"/>Line 1<br />Line 2<br />,'

  3. You'll want to change the width, height, and src to match your image. In this example, I added some CSS styling and a couple of lines of text to replicate the look in the example above. You are free to delete these or replace them with your own custom HTML/CSS.

HTML5 Map Documentation v2.9

Customization

Installation

Common Questions

Troubleshooting

JavaScript API

© Simplemaps.com 2010-2015 | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
Deprecated Maps: Flash USA Map | Flash World Map | Flash Canada Map | Flash Europe Map | Flash Congress Map
Formerly FlashUSAmap.com and Flashworldmap.com