Question

I’m trying to put a google maps thing onto my website. At the moment, you click a button and the map appears in the middle of the page:

function showMap() {
    $('mapAndButton').setStyle('display', 'block');

    var map;
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
}

This code is copied from the tutorial provided on the webpage for the API. For some reason, it doesn’t work. The map renders like this:

An empty grey box rather than a map. The fact that the box appears, and that there is some google stuff at the bottom of it, implies that something is working, at least. Clicking the button several times, or waiting for a long time, makes no difference.

What might be the problem?

Answer 1

I think this error happened because there was an old reference to a previous version of the google maps API elsewhere on the page. When I removed this, so that only the latest version of the api was being loaded, the map rendered correctly.