Google Maps rendering locally but not in live environment

Question

I have a page that renders a simple google map for a specified location. This map renders without any problems at all when I run it locally on localhost, however, when I deploy this code to our live web servers (using our LIVE google API key for the appropriate domain) it fails to render, and upon putting a series of alerts within the javascript on the page, it appears that the 'Initialize' method (which should be called within body onLoad) is not being called.

When I view the HTML source that is rendered on the live server it appears exactly as per the local version of the site (including the call to initialize() within the body onLoad event), albeit with the different maps API key.

I have output the host (alert(window.location.host);) to ensure that the key I generated via the google maps api site, corresponds exactly to the live server, which it does.

Does anyone have any ideas why it would be working locally but not when deployed to the live servers? The live site is hosted on 2 load-balanced web servers.

This is the javascript that is rendered:

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=ABQIAAAA-BU8POZj19wRlTaKIXVM9xTz76xxk4yAELG9u79oXrhnLTB5NRRvAZ-bkKn1x8J68nfRTVOIWNPJEA" type="text/javascript"></script>
<script type="text/javascript">
    var map;
    var geocoder;

    alert(window.location.host);

    function initialize() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("businessMap"));
            map.setUIToDefault();
            geocoder = new GClientGeocoder();
            showAddress('St Margarets Street SW1P 3 London');
        }
    }

    function showAddress(address) {
        geocoder.getLatLng(
            address,
            function(point) {
                if (!point) {
                    // Address could not be located.
                    jQuery('#googleMap').hide();
                } else {
                    map.setCenter(point, 13);
                    var marker = new GMarker(point);
                    map.addOverlay(marker);
                    var html = 'Address info for the marker';
                    marker.openInfoWindow(html);

                    GEvent.addListener(marker, "click", function() {
                        marker.openInfoWindowHtml(html);
                    }); 
                }
            }
        );
    }
</script>

Any help would be much appreciated.

Thanks.

Answer 1

I've located the problem. It was some conflicting javascript related to Facebook Connect that was calling an FB Connect related page on window.onload, therefore not calling the initialize function within the body onload event.

I should have noticed this conflicting javascript earlier!