November 19th, 2008
Show / Hide with Google Maps
For the new release of CampusLIVE we’re adding auto-geocoded maps using the GMaps api and a few custom php classes. We’re using the CodeIgniter framework, coupled with a custom version of the PhoogleMaps class (hacked into a custom CI library).
Our team agreed that we should hide the map under a “show/hide” link since most users wouldnt need to see them. Unfurtunately after placing the map in a hidden div and opening it up with a javascipt link the map would display half of the images and not work properly.
After a lot of thrashing the keyboard, I found the solution. Technically the gmap is drawn to the size of the parent block element. This means that when the map is inside a div with the style “display: none” initially, the map will not completely load. To fix this, use the “new GSize” function to override this and set the actual size of the map. Works great.
Original GMaps Code
var map = new GMap(document.getElementById("map_canvas"));
With Fix Fix (use GSize(width in px, height in px))
var map = new GMap(document.getElementById("map_canvas"),{size: new GSize(653,348)});
