Make your map responsive | Documentation

With the advent of tablets and smart phones, webmasters can no longer safely assume that their visitors are using a desktop computer with a popular screen resolution.  This has led to the popularity of responsive web design: the effort to make a web page accessible across a wide range of devices.

At SimpleMaps, we are dedicated to providing HTML5 interactive maps that can be viewed on as many devices as possible with the best experience possible.  That's why our maps can automatically detect touch devices and provide mobile-friendly navigation for those users. To put your map in responsive mode, do one of the following:

• If you are using our online customization tool: go to the "Settings" tab and give the Map Width a value of responsive:

  

• If you are editing the mapdata.js file in a text editor: give the width in the main_settings a value of responsive.

  

Important details

1. This will make the map expand or contract to fit the width of its parent div. The map will resize itself if the browser is resized or the orientation of a mobile device switches between portrait and landscape.

   The state of the map will remain constant as the map scales. For example, if a user is zoomed in on "South America" and the map is resized, the user will not be zoomed out like he/she would be if the map was reloaded.

2. Make sure that you are using a responsive web design!
   The map can only expand to fill the space available to it. If it is contained in a div with the CSS attribute max-width: 400px; the map will never exceed this size.