Ask your WordPress questions! Pay money and get answers fast! (more info)

SVG root element is making google ad link unclickable WordPress

  • SOLVED

I added Google Ads feature to my mapping plugin "Leaflet Maps Marker" - unfortunately on maps with an SVG root (for vector layers) the ad is not clickable (in contrast to maps without vectory layers = second map on demo site).

More info on the demo site at http://pro.mapsmarker.com/?p=40

Additionally to the 10$ here I am giving away a pro license worth €39 including 1 year access to updates and support for a real fix ;-)

Answers (4)

2013-12-05

zebra webdesigns answers:

I dont know if this is right solution.
But visually its not affecting anything and the ad is clickable.
add the follwing CSS and see if that works for you

.leaflet-overlay-pane svg {
display: none;
}


Robert Harm comments:

thx but not a solution - also hides the markers on the map


zebra webdesigns comments:

I dont see any markers hiding Can you explain using a screenshot of what you are referring so that it will be helpful to view clear


Robert Harm comments:

I will check again & let you know the results (I remembered that I already tried something similar and all markers got hidden - anyway, will check again)


Robert Harm comments:

that was the right approach - could fix it with that, thanks! regarding the free pro license: please start a free trial by downloading and installing the plugin from www.mapsmarker.com and send me an email once you started a free personalized trial so that I can assign your user the unexpiring pro license
best,
Robert

2013-12-05

Balanean Corneliu answers:

The zebra solution its working for me.


Balanean Corneliu comments:

What browser you are using ?

2013-12-05

Ross Wilson answers:

When I made the leaflet-map-pane div come before the leaflet-google-layer div in the html the ad is clickable

Edit: Actually, that hid the markers as well.

It looks like you need to make the html look like this:


<div class="leaflet-google-layer"></div>
<div class="leaflet-map-pane"></div>
<div class="leaflet-lmm-google-ad"></div>

2013-12-05

Duncan O'Neill answers:

A quick hack solution?:


.leaflet-zoom-animated { visibility:hidden;}


It seems to work with zooming and dragging.