Creating interactive Google Map with hover over?

Get Started
1

Hi there,
What would be the best way to create a map similar to the one on the left of this page:

E.g, when you hover over the pointers, it displays some hover text. Also, could I style these to the way I want and include the text I would like on each pointer?

Thanks!

2

It looks like that one is none through Google itself and then embedded on the page.

You could create your own version if you wanted, even just with HTML and CSS. You would just take a map image, absolutely place the markers over that image, and have text appear when you hover on the markers.

3

Thanks, but it seems the map is done through Google as you can drag it around. Any other ideas?

4

You could do it through Google yourself. I’ve forgotten how, but if you Google “add pins to your Google map” or something like that, you find instructions on how to add those pins to your map and then embed the map on your page. I assume that’s how they’ve done this.

5

I can add the pins/pointers, but wanted to know how I can add my own custom hover effects like they have done in the white box/black text. Any ideas?

Thanks

6

Hm, Googling this produced all sorts of technical info about using the Google Maps API with JS etc. But I assume there is a way to do it though the same interface that lets you place the pins. This video might give the clue: