发表新帖
发表新帖

Google Maps API v3: Gray Box, no map

后端 未结
关注
14 756
离开以前
离开以前 2020-12-06 09:20

As part of a much bigger project, we\'re trying to get a Map on a site using Google\'s Map API v3. I have followed the simplest steps that Google has laid out, I\'ve tried c

相关标签:
14条回答
  • 南笙
    2020-12-06 09:33

    I had the same issue. i was using google maps in Jquery Accordion and when i expand the div the map only consisted a grayed area. I was able to solve this issue by triggering a click event on the specified accordion heading and setting the map container to visible.

    Script:

    <script type="text/javascript">
    var map;

    function initMap(lat, lng) {
        var myCenter = new google.maps.LatLng(lat, lng);

        var mapOptions = {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: myCenter
        };

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

    }
    function ViewMap() {
        var latlng = document.getElementById('<%=txt.ClientID%>').value.split(','); // This is where my latlng are placed: 25.12312,55.3212333
        $("#showmap").show();
        // Sorry for mixing up Jquery and javascript.
        initMap(latlng[0], latlng[1]);
    }

</script>

    ASPX File/Html Markup:

    <h3 id="lMap" onclick="ViewMap();"><i class="fa fa-map-o" onclick="ViewMap();"></i>Location Map</h3>
<div style="height:auto" id="showmap">
   <div id="map" style="width: 850px; height: 550px; overflow: visible"></div>
</div>
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-06 09:37

    This may not be the case for everyone, but maybe it can help someone.

    I was creating markers in my map from data attributes placed on the map element like this: data-1-lat="2" data-1-lon="3" data-text="foo". I was putting them in an array based on the order they were placed in the data attributes.

    The problem is that IE and Edge (for some mad reason) invert the order of the data attributes in the HTML tag, therefore I wasn't able to correctly extract them from the data attributes.

    0 讨论(0)
  • 耶瑟儿～
    2020-12-06 09:41

    This works for me. You simply have to set zoom parameter:

    UPDATE (by @user2652379): You need to set BOTH zoom and center options. Just zoom does not work.

    <!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>  
<script type="text/javascript">

    function load() 
    {
        var mapDiv = document.getElementById("map");
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = 
        {
            zoom: 8,
            center:latlng,
            //backgroundColor: '#ff0000',
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            //imageDefaultUI: true
        };
        var map = new google.maps.Map(mapDiv, mapOptions);
       // map.addControl(new GSmallMapControl());
       // map.addControl(new GMapTypeControl());
       // map.addMapType(ROADMAP);
       // map.setCenter(
       // new GLatLng(37.4419, -122.1419), 13);
    }

</script>

  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 400px;">&nbsp;</div>
</body>
</html>
    0 讨论(0)
  • 暗喜
    2020-12-06 09:41

    I realise this is an old thread, but this may help someone in the future.

    Struggled with this for hours, but after discovering that the Google Map is rendered with a grey box overlay if the map is rendered while not being visible, I used a bit of jQuery to make my application only instantiate and render the map if the map is visible, like such:

    if ($("#myHomeMapHolder").is(":visible")) {
        if (homemap == null) {

            homemap = new google.maps.Map(document.getElementById("myHomeMapHolder"), myOptions);
            google.maps.event.addListener(homemap, 'click', function (event) {
                placeHomeMarker(event.latLng);
            });
        } else {
            homemap.setCenter(myLatlng);
        }


        if (homemarker == null) {
            homemarker = new google.maps.Marker({
                position: myLatlng,
                map: homemap,
                title: "Home"
            });
        } else {
            homemarker.setPosition(myLatlng);
        }
}

    And voila, my map is only rendered if the map holder is visible, so it never renders with a grey box.

    For anyone wondering, myHomeMapHolder is a div which the map sits inside.

    0 讨论(0)
  • 夕颜
    2020-12-06 09:42

    I had this issue with a site I'm working on too. We're doing some things to all <img> tags for responsiveness. This fix is working for us for the map:

    img {max-width: initial !important;}
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-06 09:45

    I had the same issue and came across a lot of topics on stackoverflow but none of them had the working solution for me. I eventually found out it was caused to a line of css I had added.

    All the elements in the map inherited a

    overflow:hidden;

    By adding the following line to my CSS it was fixed

    #map * {
    overflow:visible;
}
    0 讨论(0)
 看不清?
提交回复
热议问题