Question

This is the code im working from:
http://jsfiddle.net/X9SkK/

This is the javascript:

function showmap() {
     var map;
      function initialize() {
        var mapOptions = {
          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'),
            mapOptions);
      }
}​

I want to have it so that when I click the button the map loads, however it doesnt work for some reason. I am sure its something simple but I cant pinpoint it.

Answer 1

The code actually creating the map is wrapped in a function named initialize, which isn’t being called. Remove that and you’ll be fine:

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

Also, be sure to specify a fixed height (such as 400px) for your #map_canvas element, or it won’t be visible in your jsFiddle.