[OpenLayers-Users] jQuery FancyBox Question

Ian Barton lists at wilkesley.net
Wed Nov 30 03:18:35 EST 2011


I am building a page which loads gpx track points from a text file as 
POI's into a Google Maps layer. When the user clicks on a POI they see a 
thumbnail of a photo taken from that location. What I want to happen is 
for Fancybox to pop up a larger version of the photo when the user 
clicks the thumbnail. This doesn't work presumaby because the pop up 
hasn't been created when the page is loaded. Following some help on 
StackOverflow I have come up with:

<script type="text/javascript">
     var map;

     function init() {
         map = new OpenLayers.Map('map');
         map.addControl(new OpenLayers.Control.LayerSwitcher());

         var gphy = new OpenLayers.Layer.Google(
             "Google Physical",
             {type: G_PHYSICAL_MAP}
         );
         var gmap = new OpenLayers.Layer.Google(
             "Google Streets", // the default
             {numZoomLevels: 20}
         );
         var ghyb = new OpenLayers.Layer.Google(
             "Google Hybrid",
             {type: G_HYBRID_MAP, numZoomLevels: 20}
         );
         var gsat = new OpenLayers.Layer.Google(
             "Google Satellite",
             {type: G_SATELLITE_MAP, numZoomLevels: 22}
         );

         var pois = new OpenLayers.Layer.Text( "My Points",
                 { location:"ella_trip_waypoints.txt",
                   projection: map.displayProjection
                 });
         map.addLayer(pois);



         map.addLayers([gphy, gmap, ghyb, gsat, pois]);

         map.setCenter(new OpenLayers.LonLat(-3.98600, 53.12540), 13);

});

     }


</script>


<script type="text/javascript">

$("#map").delegate("a.simpletitle", "click", function(){
  event.preventDefault();
  $.fancybox(this),{
  'titlePosition': 'inside'
  });
});


</script>

However,  in Chrome I get an "Uncaught TypeError: Cannot call method 
'appendChild' of undefined" when I click the thumbnail. Trying to 
delegate click events on other divs in the document works, so I assyume 
that it's something in OpenLayers which prevents this working.

Any suggestions on how to achieve what I want greatfully received!

Ian.



More information about the Users mailing list