Google Maps API - Map not showing - no errors

Question

I am trying to load a map from the Google API into a div. However, the map is not loaded, and no errors are outputted. This is the code:

// google maps

var geocoder, map;
function codeAddress(address) {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var myOptions = {
        zoom: 8,
        center: results[0].geometry.location,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      }
    });
  }


  google.maps.event.addDomListener(window, 'load', function() {
    codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
  });

I have been dealing with the problem for quite a long time now, and I am out of ideas.

Anybody of you familiar with the google maps api, who knows what's wrong with my code? My div does exist with the ID: map_canvas.

Answer 1

The problem was:

• I didn't use API-key (even though it don't think this was nessecary, but it worked)

• I didn't set the width/height of my div (.map_canvas {width: 500px; height: 500px;}).

• I forgot to initalize like so:

  initialize();
  
  function initialize() {
    google.maps.event.addDomListener(window, 'load', function() {
      codeAddress('London');
    });
  }
  

It now works. Thanks!

Answer 2

Are you loading the Google Maps API...? Are not you missing something like this on your page?

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your_api_key&sensor=false&callback=initialize"></script>
...
<script>
    function initialize() {
        codeAddress('" . $location['address'] . " " . $location['zip'] . " " . $location['city'] . " " . $countries[$location['country']] . "');
    });
</script>

Please take a look at Google's example.