CMS Development

Cory
Participant

Interactive WordPress Map

Is their a way to incorporate a WordPress Interactive Map on a HubSpot website?

This is what I am wanting to use. 

https://elements.envato.com/image-map-pro-WA97SMB

Non of the Locations Maps in the Asset Market Place come close to this. 

0 Upvotes
11 Replies 11
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Interactive WordPress Map

Hi  @Cory

do get clear:
You want a "area highlight module" so that the visitor of your page can highlight some areas? Right? 

 

If so you/your developers will need to develop something by yourself. If you find a code/library or something similar online you could inject it into HubSpot with a custom module or just the plain files. You can search for "image hotspot code/library" in google. But there is no "ready-to-use" module/extension like this for hubspot 

 

 

best, 

Anton

 

 

Anton Bujanowski Signature
Cory
Participant

Interactive WordPress Map

Correct on the highlight part.  Just a area highlighted.  I was wanting a interactive map like on this page. https://innovex-inc.com/locations/

You hoover over the highlighted area and the information about that area pops up.

 

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Interactive WordPress Map

@Cory you could check the marketplace for a custom module. But if you want to keep that specific design you'll need a custom module designed.

 

If you know basic HTML/CSS, I'd recommend using an inline SVG and a bit of CSS to for the hover effects. The slightly more detailed version: start with this SVG of the united states, open it in a vector design app like Adobe Illustrator and add your circles and hover elements, export the SVG and copy and paste that code into the HTML of a new custom module. Finally, add the CSS to hide/show the hover boxes on hover of each circle.

 

Hope that helps!

Stefen Phelps, Community Champion, Kelp Web Developer
Cory
Participant

Interactive WordPress Map

Thank you, Stefen.

I will give that a try.

Appreicate it.

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Interactive WordPress Map

Hey @Cory 

 

Have you seen this tutorial:

Let's Build A Page with a Map, using HubDB

Users on the forums basically take the relavent parts and build great solutions that do exactly what you're looking for.

 

@ben-duchy did something similar a few years back! Not sure if it's still live though.

 

Also:

@Anton solutions are on point!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ben-duchy
Top Contributor

Interactive WordPress Map

Hi @Kevin-C  thanks for the tag.

 

My example no longer exists on that page, but I have another here (scroll down to see the map). It's not an actual map like google, just an internal map (flat graphic) for one of my employers developments.

 

Using HubDB to help streamline managing the data and to give a bit of interactivity to an otherwise boring graphic.

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Interactive WordPress Map

@ben-duchy  Awesome! Thanks for the link.

 

It might be because this was the first time I saw the DB used in this way, but I absolutely love this implementation!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ben-duchy
Top Contributor

Interactive WordPress Map

Thanks for your appreciation of my work @Kevin-C  - makes it all worth it 😊

 

For anyone wanting more information, I'm happy to share how I pulled it off using HubDB / HubL / CSS / JS as it's evolved into a complex custom module to display all the different plot information using looping items , if statements and Pricing calculations using math operators to display a breakdown of a particular offer on that specific plot.

 

Sounds more tricky than it is. You just need to get your head around how HubDB / HubL works and the different functions available and you'll be on your way.

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Interactive WordPress Map

Hey @Cory 

 

I just remebered this solution as well.

 

I believe that it accomplishes what you need, and rather than use the HubDB you can translate it into a custom module and modify the content directly from the content authoring tools.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Interactive WordPress Map

Hi  @Cory

ok - great. 

Like I've said - there is no such native HubSpot function, but here are some ressources that might help you achieve this functionality:

I would suggest that you buy/download one of them, create a custom module and create a repeater function for each "info-box".

 

 

best, 

Anton

Anton Bujanowski Signature
Cory
Participant

Interactive WordPress Map

Ok.

Thank you.

I appreicate it.

0 Upvotes