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