Google Maps - all buttons are disabled on load

Question

I'm writing a Wordpress page for a client that displays some text and a Google Map based on data loaded from a database.

So far I've gotten most of it to work. The Google Maps however begins to load then mysteriously "blues" out displaying only what looks like ocean with all the other options (zoom in/out, street view, etc.) greyed out.

There are no JavaScript errors available from FireBug etc.
The divs containing the map (#container, and #map-canvas ) are set to real pixel values.
The solution given here yields no positive results.

This is what the end result looks like:

What it looks like

Any ideas would be extremely welcome.

Edit: Code snip per request:

echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
        echo '
            <div id="container" style="height:500px;width:500px;">
                <div id="information">
                    <h2>'.$detail['name'].'</h2>
                    <p>'.$detail['description'].'</p>
                    <p>'.$detail['address'].'</p>
                </div>
                <div id="map-canvas" style="width:300px;height:200px;">
                </div>
            </div>
        ';

Un-minified version of the JS:

function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
    var mapOptions = {
        center: ourLocation,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: ourLocation,
        title:name
    });
    google.maps.event.addDomListener(window,"load",initialize);
};

jQuery(function($){
    initialize(lat,lng,name);
    // the variables lat, lng, and name are replaced with php variables in the code
});

Have you tried to initialize your map-canvas div above your container div? — alvinarul, Jun 12 '13 at 02:12
Just gave that a whirl. All it did was move the map directly above the container. The problem persisted. — Matt Walther, Jun 12 '13 at 02:18
What are the coordinates used for ourLocation for that picture? Looks like the map is centered on water and zoomed in so no land is visible. — geocodezip, Jun 12 '13 at 02:48
@geocodezip The coordinates are stored in a database. I had beta'd this code before in a plain html page, before I adapted it for Wordpress, and on the Wordpress page itself, the map begins to load, (with streets and labels, and everything!) but blanks out like the picures in the original post. — Matt Walther, Jun 12 '13 at 02:55
I don't care where they come from. What are they? (the particular coordinates that were used for the picture of the "blue" map) — geocodezip, Jun 12 '13 at 02:57
How about a live link that exhibits the problem then? What happens when you zoom out in the map? Perhaps your minimized code is conflicting with something else? — geocodezip, Jun 12 '13 at 02:59
It seems like a WordPress issue have you read this? http://en.support.wordpress.com/google-maps/ — alvinarul, Jun 12 '13 at 03:02
@geocodezip As pictured they are: (38.951736,-94.789803). I mentioned where they were from because this isn't an isolated incident. I have a lot of coordinates in the database, and each one tested resulted in the same problem. I unfortunately do not have a live link I can display. — Matt Walther, Jun 12 '13 at 03:30
@AlvinArulselvan I will keep that in mind. I would rather call google's api. — Matt Walther, Jun 12 '13 at 03:30
Striking what I said earlier, here is a live link: http://www.datacentersandcolocation.com/phpfall/?location=28 — Matt Walther, Jun 12 '13 at 04:44

score 0 · Accepted Answer · answered Jun 12 '13 at 23:25

I figured it out. Took a little while, but...

Wordpress hates the jQuery call for some reason or another.

I noticed that in the JS console, if I called the initialize function with the variables I'd rip from the generated source then the map would magically work.

Instead of using jQuery, I just used the windows onload event.

window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }

Which magically works. Lesson learned, jQuery and Wordpress are like Strawberry Chocolate Milk and India Pale Ales: they don't mix well.

Thank you everyone that contributed.

Google Maps - all buttons are disabled on load

1 Answers1