Creating a Clickable Map


#1

Hi! I have been asked to create a clickable interactive map for a landing page on Unbounce and I need some help doing it.

Essentially, we have a US map separated by regions. We want the map to be clickable to display an agency that works for that specific region. How would I go about implementing this in the cleanest way possible and embed it in an Unbounce landing page?

Thanks!
Ashley


#2

Have you thought about creating your own Google Map?

It’s pretty customizable and you can embed that in your Unbounce page.


#3

Hey @EnergyFocus,

You have a couple of options depending on how comfortable you are with writing/editing your own code.

Option 1:

Custom code the whole thing from scratch. Get a nice SVG image of the US and write the whole thing yourself.

Pros:

  • You’ll have more control of how the map works and looks
  • One time cost for developing it

Cons:

  • You’ll have to have a pretty good handle on JS and CSS

Option 2:

Use a tool that allows you to embed a map like the one you need. A quick Google search reveals a few options straight on the 1st page of results.

Pros:

  • You don’t need to be an expert developer to do it
  • Saves time

Cons:

  • You’ll be relying on a 3rd party which is not ideal
  • You’ll possibly increase your page load time due to the fact that you have to load external resources for you map

Both options have their advantages so it comes down to your personal preference/time/budget/skill etc.

Last but not least, with both options you have to consider the mobile view and what would happen when visitors load your landing page on their phones.

There is no easy way to make a useable map of the entire US that would fit nicely on a mobile screen AND would still be interactive.

Best,
Hristian