0

I viewed a few other threads. When the code executes, you can see it's working and functioning properly via "Inspect Element"/source code, but it just shows a blank screen. I feel like it has something to do with the CSS, but I did all their CSS requirements in the "getting started" part of the google maps api introduction.

Code:

<div id="map-canvas"></div>



<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API-KEY&sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Of course, API-KEY is replaced with my key which works fine since it's valid.

Then my CSS:

html { height: 100%: ;}
body {
    background: #f5f5f5;
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    line-height: 140%;
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map-canvas { height: 100%; width: 100%; }

Any help would be greatly appreciated! Thank you!

Peanut
  • 3,153
  • 7
  • 28
  • 47

1 Answers1

1

Ah there was an error in my CSS (if you see the html { }, it has a semi-colon and a colon as well.

I also had to make sure the parent divs were at 100% height too.

Peanut
  • 3,153
  • 7
  • 28
  • 47