Thursday, 15 March 2012

javascript - Multiple fancybox google map -



javascript - Multiple fancybox google map -

how set popup fancybox different content in different markers? i've managed set fancybox can see same content 2 markers. find way set different content in fancybox each maker.

<script type='text/javascript'>//<![cdata[ $(function(){ function initialize() { var mapoptions = { zoom: 4, disabledefaultui: true, center: new google.maps.latlng(45.35, 4.98), maptypeid: google.maps.maptypeid.terrain } var map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); addmarkerwithwindow("lemans", new google.maps.latlng(48.006922, 0.20874), map); addmarkerwithwindow("paris", new google.maps.latlng(48.856291, 2.352705), map); } function addmarkerwithwindow(name, coordinate, map) { $.fancybox({ content: url }); var image = 'rss.png'; var marker = new google.maps.marker({ map: map, icon: image, position: coordinate }); var styles = [ { featuretype: "all", stylers: [ { saturation: -15 }, { lightness: -10 }, ] }, ]; map.setoptions({styles: styles}); <!-- ne pas utiliser --> var url= "http://www.fancyapps.com/fancybox/"; <!-- ne pas utiliser --> var div = document.createelement('div'); div.innerhtml = 'hello'; google.maps.event.addlistener(marker, 'click', function() { $.fancybox({ maxwidth : 800, maxheight : 600, href : "rssddd/feedek_demo.html", type : 'iframe' }); }); } initialize(); });//]]> google.maps.event.adddomlistener(window, 'load', initialisation); </script>

démo : http://ps3land.franceserv.com/

pass 4th argument addmarkerwithwindow() , e.g:

addmarkerwithwindow("lemans", new google.maps.latlng(48.006922, 0.20874), map, 'http://lemans.org'); addmarkerwithwindow("paris", new google.maps.latlng(48.856291, 2.352705), map, 'http://parisinfo.com');

make argument accessible within function:

function addmarkerwithwindow(name, coordinate, map, href) { //your code }

and utilize href-option fancybox:

$.fancybox({ maxwidth : 800, maxheight : 600, href : href, type : 'iframe' });

javascript jquery html google-maps-api-3 fancybox

No comments:

Post a Comment