0

How to put a popup fancybox with different content in different markers? I've managed to set up the fancybox but you can see that it is the same content for two markers. I would like to find a way to put different content in my fancybox for 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/

1
  • 1
    I guess you'd need to make the href attribute a variable and have it pull that variable in with the correct value depending on which marker has been clicked. Not sure how to do that I'm afraid but maybe that will nudge you in the right direction. Commented Feb 8, 2013 at 16:40

1 Answer 1

1

Pass a 4th argument to 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 the argument accessible inside the function:

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

and use it as href-option for fancyBox:

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.