Google Map call does not work

advertisements

So, I'm a little confused. I tried calling a google map with the api and tutorial provided here: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box. Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...

<div id="map_canvas"></div>

...

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById("map_canvas");
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas);
  }
  google.maps.event.addDomListener(window, "load", initialize);
</script>

my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.


I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:

try:

var map = new google.maps.Map(map_canvas, mapOptions);