Add a shape/pointer that opens an info card when clicked (ie. bars on a map)

Hi there. I've created an illustrated city map and have added this as a large image on my page. I'd now like to add small pointers/dots onto areas of the map to highlight recommended bars and restaurants. For each pointer, when clicked I'd like it to open a small text box that gives more info on the bar (name, google maps link, description etc.). Once read, the reader will close this and click another pointer on the map.

If there's any way to create this, please let me know as I can't figure out if this is possible. 

Many thanks!

Do you have an example/or mockup?