Responsive location map without JavaScript

Nowadays almost all websites feature some kind of location map on the contact page. They’re usually created using Google Maps which is a truly fantastic tool. Nevertheless sometimes it can be a bit of an overkill, can hurt your website performance and load time. If you don’t need your location map to be interactive you can create it using only an image and some CSS.

Not convinced? Take a look at the following demo.

The location map featured in the demo is fully responsive and doesn’t require any JS to function. It has markers and functioning popups which change to an accordion menu on mobile screen sizes (screens less than 768px wide).

The great thing about this kind of map implementation is you can style it in the way you want as you’re using an ordinary image for your background and CSS for your markers and popups.
It’s also a benefit that it’s easy on the page performance. Just be sure to optimize your image properly.

Download the source files and go ahead and have some fun experimenting.