Lightbox icm Google maps marker - Softwareontwikkeling

woensdag 20 oktober 2010 18:27

Acties:

Unagi

Topicstarter

Ik ben bezig met een vrij eenvoudige website met behulp van Google maps. Ik vul de markers uit een database, door een combinatie van PHP, XML en Javascript. Bij iedere marker komt netjes wat tekst uit de database. Ik wil de info op deze marker graag uitbreiden met een link, na klikken op deze link wil ik een soort van pop up over het gehele scherm met extra info uit de database.

Voorbeelden van de schermen die ik bedoel:
- Thickbox
- Colorbox
- Fancybox
- Shadowbox

Allemaal maken gebruik van JQuery. En het commando:

code:

1	$(document).ready(function()

Hier schuilt mijn probleem, ik vul de markers in een javascript functie, dit gebeurd voor de pagina volledig is geladen en dus voor bovenstaand commando. Gevolg is dat alle links werken met de lightbox, maar niet de links in de marker.

Ik heb er een gevonden die niet met dit commando werkt Slimbox. Die kan echter weer alleen foto's laden en geen tekst.

Ik hoop dat iemand mij in de goede richting kan sturen.

edit:
Heb btw ook gekeken naar CSS only varianten, maar die zijn er weer niet te vinden die zowel voor IE als de overige browsers werken

[ Voor 5% gewijzigd door Baarsjes op 20-10-2010 18:31 ]

http://www.bonuszoeken.nl

woensdag 20 oktober 2010 18:41

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Wat die lightboxes doen is je DOM nalopen op (o.a.?) anchors met een bepaalde class of weet ik het maar die links die je aan Google Maps geeft zijn natuurlijk geen onderdeel van 't DOM maar van de (JS) van de Google maps.

Die functie die on-ready wordt uitgevoerd hangt (afaik) gewoon een onclick aan de elementen die een lightbox moeten worden; die functie kun je natuurlijk zelf ook aan je marker-links hangen.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 20 oktober 2010 19:43

Acties:

Baarsjes

Unagi

Topicstarter

Klinkt eenvoudog, maar toch lukt het me niet. Ik heb onderstaande code

code:

<script>
   $(document).ready(function(){
   $(".example7").colorbox({width:"80%", height:"80%", iframe:true});       
  });
</script>
</head>
<body>
 <p><a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p>
 <p><a href="http://google.com" onClick="colorbox({width:'80%', height:'80%', iframe:true})">Outside Webpage (Iframe)</a></p>

De eerste link werkt uiteraard wel, de tweede niet, ik gok door de syntax.

http://www.bonuszoeken.nl

woensdag 20 oktober 2010 19:55

Acties:

OkkE

CSS influencer :+

Dat de onderste link niet werkt zal waarschijnlijk met de syntax te maken hebben ja. Maar het probleem zit 'm denk ik, zoals RobIII al zegt, in het feit dat de linkjes in GooleMaps niet in de DOM voorkomen.

Zelf nog nooit zoiets gemaakt, maar ik gok dat er wel ergens in de GoogleMaps API een functie zit die de markers maakt, daar zal je denk ik wel via een callback de ColorBox (of welke dan ook) aan kunnen hangen.

Pseudo:
.

code:

1	gmap.createMarker(longitude, latitude, this.colorbox());

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.