Initializing Javascript in Infowindow

273 views
Skip to first unread message

spi

unread,
Jun 30, 2010, 11:19:23 PM6/30/10
to Google Maps JavaScript API v3
I'm trying to initialize a jquery colorbox lightbox upon clicking a
simple text link. Since I'm quite new to Google Maps, I'm not sure
about how to best approach this.

My code is below:

function initialize() {
var latlng = new google.maps.LatLng(39.2047, -84.4501);
var settings = {
zoom: 12,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style:
google.maps.NavigationControlStyle.ZOOM_PAN},
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("cincinnati"),
settings);

var companyPos = new google.maps.LatLng(39.2047, -84.4501);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Cincinnati, OH" });
var contentString =
'<div id="infowindowcontent">'+
'<h6>Cincinnati, OH</h6>'+
'<p>14 Sunnybrook Dr</p>'+
'<p>Cincinnati, OH 45237-2135</p>'+
'<p><a href="http://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&q=2J+Supply+Co,+Cincinnati,+OH+
+&sll=39.401378,-84.425873&sspn=1.598057,3.56781&ie=UTF8&hq=2J+Supply
+Co,&hnear=Cincinnati,+Hamilton,
+Ohio&ll=39.208049,-84.450188&spn=0.193667,0.445976&z=12&iwloc=A"
class="colorbox" title="Get Driving Directions to the Cincinnati
Location">Get Driving Directions</a></p>'
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
google.maps.event.trigger(companyMarker, 'click');
}


Currently, you can see that the link will break out of the infowindow
and load fullscreen in a new window.

Any help that you could provide would be great. Please be as specific
as possible so I can treat this as a learning experience.

Thanks,

Cory

Rossko

unread,
Jul 1, 2010, 6:11:39 AM7/1/10
to Google Maps JavaScript API v3
Bear in mind that this is just a string

>           var contentString =
>           '<div id="infowindowcontent">'+
...
> class="colorbox" title="Get Driving Directions ...

and it doesn't exist in the browsers DOM as HTML elements, until after
the API has constructed and populated the infowindow.

Addons on like Lightbox scan the newly initialised DOM looking for
elements with class='whatever', and so they won't find infowindow
contents that aren't rendered yet.

You need some way to trigger lightbox after the infowindow has opened

spi

unread,
Jul 1, 2010, 2:19:43 PM7/1/10
to Google Maps JavaScript API v3
Thanks for your reply, Rossko. I understand what you're saying. So, we
could do an onclick event here perhaps...
Reply all
Reply to author
Forward
0 new messages