CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
FooBar
FooBar

Reputation: 6108

Google Maps API - Map not showing - no errors

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.

Upvotes: 4

Views: 19958

Answers (3)

FooBar
FooBar

Reputation: 6108

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!

Upvotes: 7

Andre Renaldo
Andre Renaldo

Reputation: 1

I assume you load the map on 'map_canvas' div, right? Try to define the height and the width of those div on your stylesheet, that's what happen to me on my project and it's solved for me... The problem seems to happen because of other style attributes like position or float maybe.

Upvotes: 0

gnclmorais
gnclmorais

Reputation: 4971

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.

Upvotes: 1

Related Questions