CODEWITHSUNDEEP
jquerygoogle-mapsiframefancyboxfancybox-2
Meloun
Meloun

Reputation: 15049

fancybox: Zoom in/out for googlemaps

I use fancybox(http://fancyapps.com/fancybox/) to show some places on google-maps, one of the examples is folowing..

<script type="text/javascript"> 
    $(document).ready(function() {
    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
    });        
</script>

and html

Google maps
<ul>
        <li><a class="fancybox-media" href="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17">Search results</a></li>
        <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17">Direct link</a></li>
        <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56">Street view</a></li>
</ul>

But I canť zoom in/zoom out with mousewheel, is that even possible?

Upvotes: 1

Views: 970

Answers (1)

JFK
JFK

Reputation: 41143

When you embed Google maps in an iframe (the recommended way to embed them into a website) you can't zoom in/out the map using the mouse wheel (you could zoom a street view image though) ... that would be the normal behavior.

Check this JSFIDDLE as example with pure html iframe.

When you display Google maps in fancybox, they are actually wrapped in an iframe, so you can't use the mouse wheel to zoom in or out either .... so regarding your question I don't think it's possible.

It's not a fancybox issue but an html iframe limitation.

EDIT :

Google map's fusion tables can be zoomed in/out using the mouse wheel ... in this case, those maps should be opened using fancybox iframe mode like :

$(".fancybox").fancybox({
    type: "iframe"
});

See JSFIDDLE

My conclusion : it all depends on the content format. Fancybox doesn't set any limitation to the content inside the iframe : whatever you can do in a regular html iframe, is what you can do inside fancybox (iframe mode).

Upvotes: 1

Related Questions