Question

I’m bulding a website for an art project. It is based on WordPress and I want the users to navigate the content browsing a custom Google map with links to the different articles inside the map’s markers. I’ve already maneged to insert the markers with functional links and everything wors fine.

I found two solutions for displaying the map within my site:

1) LINK to solution 1 Here I tell the Google maps API to build the map in a div inside the page, with the related Javascript in a file named map.js. With this solution I’m able to use the marker as fully functional links, but, as you can see in the link, the map isn’t rendered almost at all.

2)LINK to solution 2 Here I build the map on a different page wich is the embedded in an iframe. The map is rendered correctly, with the markers and everything, but when one clicks on the marker the map just disappear.

Do you guys have any advice on how could I solve this?

Thank you.

(I’m sorry for the very very specific question).

*********** UPDATE ************

For the first case, problem solved, the css was distorting the images the whole time!

Answer 1

I’m referring to Link #1, I’ve seen something similar where the map controls get distorted and the solution is to update the CSS to restore img properties to default in the map’s div.

So, try adding these lines to the end of your style.css. It should only affect what’s in your map div

#map label { width: auto; display:inline; }
#map img { max-height: none; max-width: none; }