Google Maps not showing_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-25 11:55 出处：网络

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).

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 el开发者_开发技巧ement 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!

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.

The problem is the height: 100%; of #map_canvas.

Add this to your <head> and it should work (tested in Firefox 5 and Safari 5.1):

<style>
  html, body {
    height: 100%;
  }
</style>

For Details why this is necessary have a look at the first answer of this question:

Div 100% height works on Firefox but not in IE

Google Maps not showing

精彩评论

关注公众号

热门标签

图文推荐

Google Maps not showing

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：