I'm working on some ideas for presenting route map info on a transit web site, and would like to offer users different map options for each route. I'd like one of those options to be a Google map.

To that end, I've created a simple Google "My Maps" map for one of the routes. I am attempting to swap out this option, a Flash map option and a static .gif map option using a combination of PHP, JavaScript and CSS. (I'm currently using this method to swap between just the Flash and .gif maps).

The problem occurs when I bring in in the Google map. When it loads, it does so off center, with the route mostly off-screen in the upper left corner. I am using the iframe code generated by Google under the "Customize and preview embedded map." I position the map as desired and place the resulting iframe code in a separate PHP file, which is "unhidden" (subsequently hiding the other options) when the user chooses the "Google map" option in the map header. If I simply load the separate PHP file, the map centers just fine.

This appears to be a common problem associated with the use of display:none to hide the map elements, and I've seen a number of seemingly overcomplicated solutions that don't really apply to my specific situation (e.g., triggering a resize before the map is loaded - this doesn't seem to apply for me as I am loading the map inline using an iframe). It would be ideal if I could continue to use the current method, as there are dozens of routes and I prefer not to reinvent the current technique to simply work this new option in, which would be time and cost prohibitive. I'm hoping someone has a reasonably simple solution that doesn't involve me having to implement a new method of swapping out these maps. Even a hybrid solution would be great.

As it is, I'm really close... if I could only get the Google maps to center properly I'd be in pretty good shape.

I'd sure appreciate any ideas. Thanks all.

1 answer


See the source code at this site: www.dchristopher.com

Global Variable:

var GoogleMapLoaded = false;

This piece is bound to an onclick event:

if (index == 1 && GoogleMapLoaded == false) { // Load Google Map, solves error with it being loaded in a hidden div
                    } else {

This is the function that it is calling to initialize the map on the showing of the hidden DIV:

/* Begin - Google maps */
        function goGoogleMap() {
            var latlng = new google.maps.LatLng(42.40021946874741, -71.27913057804108);
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
            GoogleMap = new google.maps.Map(document.getElementById("LocationMap"), myOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                title: "Daryl Christopher"
            // To add the marker to the map, call setMap();
            google.maps.event.addListener(GoogleMap, 'idle', function () {
                if (!GoogleMapLoaded) {
                    /* You can trigger and bind to this event with the below jQuery code */
                    //$('#LocationMap').trigger('MapLoaded'); // $('#LocationMap').bind('MapLoaded', function() {});
                    GoogleMapLoaded = true;
        /* End - Google maps */
Answered about 8 years ago by lecynkar
  • Thanks, lecynkar, but I'm afraid I'm not quite following you here. It would probably help to see the source code in action, but the site you reference doesn't appear to use this (at least, not on the maps page as one would suspect). Do you have a URL that is actually using this code so I can see how it all fits into the big picture? matt kristiansen about 8 years ago