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.

can you post more I think this is not sufficient to debug the code. — Code Lღver
– Code Lღver, Commented Sep 27, 2013 at 11:24
Either the address you're passing into codeAddress is screwy, or you haven't set the width/height of the div your map is in. Because your code works if I just pass in 'London' to codeAddress. — Andy
– Andy, Commented Sep 27, 2013 at 11:33

Roshana Pitigala · Accepted Answer · 2018-07-08 17:32:09Z

7

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!

edited Jul 8, 2018 at 17:32

Roshana Pitigala

8,8569 gold badges53 silver badges87 bronze badges

answered Sep 27, 2013 at 11:53

FooBar

6,18711 gold badges53 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gnclmorais · Accepted Answer · 2013-09-27 11:33:59Z

1

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.

answered Sep 27, 2013 at 11:33

gnclmorais

4,9915 gold badges32 silver badges42 bronze badges

Comments

M4ks · Accepted Answer · 2017-10-05 11:53:11Z

0

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.

edited Oct 5, 2017 at 11:53

M4ks

12.1k7 gold badges30 silver badges50 bronze badges

answered Oct 5, 2017 at 11:12

Andre Renaldo

1

Collectives™ on Stack Overflow

Google Maps API - Map not showing - no errors

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related