Need Google Map InfoWindow Hyperlink to Open Content in Overlay (Fusion Table Usage)
- by McKev
I have the following code established to render the map in my site. When the map is clicked, the info window pops up with a bunch of content including a hyperlink to open up a website with a form in it. I would like to utilize a function like fancybox to open up this link "form" in an overlay. I have read that fancybox doesn't support calling the function from within an iframe, and was wondering if there was a way to pass the link data to the DOM and trigger the fancybox (or another overlay option) in another way? Maybe a callback trick - any tips would be much appreciated!
<style>
#map-canvas { width:850px; height:600px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var tableid = "1nDFsxuYxr54viD_fuH7fGm1QRZRdcxFKbSwwRjk";
var layer;
var initialLocation;
var browserSupportFlag = new Boolean();
var uscenter = new google.maps.LatLng(37.6970, -91.8096);
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: "'Geometry'",
from: tableid
},
map: map
});
//http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/reference.html
layer.enableMapTips({
select: "'Contact Name','Contact Title','Contact Location','Contact Phone'",
from: tableid,
geometryColumn: 'Geometry',
suppressMapTips: false,
delay: 500,
tolerance: 8
});
;
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
//Custom Marker
var pinColor = "A83C0A";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
new google.maps.Marker({
position: initialLocation,
map: map,
icon: pinImage,
shadow: pinShadow
});
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
//Geolocation service failed
initialLocation = uscenter;
} else {
//Browser doesn't support geolocation
initialLocation = uscenter;
}
map.setCenter(initialLocation);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
