Question

134

Google Maps API showing blank map

rated 0 times [ 138] [ 4] / answers: 1 / hits: 35668 / 11 Years ago, thu, august 29, 2013, 12:00:00

I'm sure this is a basic problem but I've hit my head against the wall too many times now, so hopefully someone will take pity on me!

I have the following example but all it does is show a grayed out box, no map at all. Can anyone tell me why?

I've checked that I'm actually returning a result and it seems to be working fine.

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

        <meta http-equiv=X-UA-Compatible content=IE=edge>

        <title></title>

        <meta name=description content=>

        <meta name=viewport content=width=device-width, initial-scale=1>



        <style>

            html, body, #map-canvas {margin: 0;padding: 0;height: 100%;}

        </style>

    <script src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>

    <script>

      var geocoder;

      var map;



      function initialize() 

      {

        geocoder = new google.maps.Geocoder();        

        geocoder.geocode( { 'address': England}, function(results, status) 

        {

          if (status == google.maps.GeocoderStatus.OK) 

          {

            var mapOptions = {

              zoom: 8,

              center: new google.maps.LatLng(results[0].geometry.location),

              mapTypeId: google.maps.MapTypeId.ROADMAP

            }



            // Let's draw the map

            map = new google.maps.Map(document.getElementById(map-canvas), mapOptions);



          } 

          else 

          {

            alert(Geocode was not successful for the following reason:  + status);

          }

        });

      }



    initialize();

    </script>

  </head>



  <body onload=>

 <div id=map-canvas style=width: 320px; height: 480px;></div>

</body>

</html>