Currently, I am attempting to integrate a Google Maps feature into my website. Presently, when you click a button, the map displays in the center 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 snippet of code was taken from the provided tutorial on the API's webpage. Strangely enough, it does not seem to be functioning correctly. The map appears as follows:
An empty grey box rather than an actual map. However, the presence of the box and some Google-related content at the bottom suggest that there is partial functionality. Clicking the button multiple times or waiting for an extended period yields no changes.
What could possibly be causing this issue?