Question

192

Google Maps not showing

rated 0 times [ 199] [ 7] / answers: 1 / hits: 24918 / 13 Years ago, wed, august 3, 2011, 12:00:00

I have a Google Map that won't show up. The Problem seems to be the same in FF & Chrome, but even more bad in IE (always latest version).

In FF & Chrome I have a problem with the position: relative; css element style. As soon as I switch to (with dev tools) position: absolute(or: fixed); everything displays fine in FF. In Chrome the map only shows the upper 30% (from top).

In IE the map doesn't even get loaded.

Here's the script stuff from the <head>. Content is only for testing and means nothing.
Note: I only use this to get the map loaded. This will be exchanged later.

<!-- Script inside <head> tag -->

    <script type=text/javascript src=http://maps.google.com/maps/api/js?

        file=api&amp;

        v=2&amp;

        key=<?php echo self::GOOGLE_API_KEY; ?>&amp;

        sensor=false>

    </script>

    <script type=text/javascript>

    function initialize() 

    {

        var startpos = new google.maps.LatLng( 50.978056,11.029167 );

        var ops = { 

             zoom:      6

            ,center:    startpos

            ,mapTypeId: 

                 google.maps.MapTypeId.ROADMAP

                ,tileSize: new google.maps.Size( 256, 256 )

        }

        var map = new google.maps.Map( document.getElementById(map_canvas), ops );

        var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );

        var contentString1 = '<div align=left dir=ltr class=infowin><h3>test</h3>testen</div>';

        var infowindow1 = new google.maps.InfoWindow( {

             content:   contentString1

            ,maxWidth:  5

        } );

        var marker1 = new google.maps.Marker( { 

             position:  pos1

            ,map:       map

            ,title: 'test' 

        } );

        google.maps.event.addListener(

             marker1

            ,'click'

            ,function() { 

                infowindow1.open( map, marker1 );

            }

        );

    }

    </script>

This is the whole mark up for the page.

<!-- html markup - There *really* isn't anything else -->

<body onload=initialize()>

<div id=map_canvas style=width:100%; height:100%;></div>

</body>

I have spend a lot of time on google without finding anything. Any ideas? Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gregoriocoya

Add To Favorites

Follow

Total Points: 549

Total Questions: 111

Total Answers: 104

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 13 Years ago sidneyh · Accepted Answer

html, body should be height:100%;.

But keep in mind, if your map holder element is a child of another element then that element should also have height:100%;

Otherwise, setting just the html and body won't do you any good.

An Example to explain my point:

<html>

<head>

  <style>

      html, body { height:100%; }

  </style>

</head>

<body>



<div id=wrapper>

     <div id=google-map-holder style=width:100%; height:100%;></div>

</div>



</body>

</html>

So, if you're doing something like the above. The height:100%; won't work here.

To make this work, you have to do the same thing with all of the parents that the #google-map-holder is a child of, in this case we would add height:100%; to #wrapper element.

IF, the #google-map-holder element was directly outside the #wrapper element and a child of the body directly then just doing html, body would be enough.