Question

I’ve tried adding the following sample code from google into my zf app.
in the head section:

<style type="text/css">
  html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

in my view:

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

I am using a layout script, if I disable it the map shows up, but if I use my layout then it disappears. Can anyone tell me what is going on?

Answer 1

OK, I’ve figured it out. It was really a CSS issue. I had a container div around my page content. It had a min-height setting of 600px. The CSS from the google example has html and body set to 100% height. I changed my container height to 100% and that solved it.