谷歌地图只显示在左边的第四部分 [英] google map shows only one forth part at left

问题描述

嘿im正在google MAP上工作..我已经使用Google Maps ice实现了谷歌地图，但是当页面刷新地图只显示在div容器的左上角，即只显示div容器的第四部分时，另一部分是空白的。但是当我按F12检查代码（Firebug）时，它会完全显示。我无法理解发生了什么......

 < div id =dvMap> 
< / div> 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js？sensor = false> 
 
< / script> 
< script type =text / javascript> 
 var map; 
 var markers = [
< asp：Repeater ID =rptMarkersrunat =server> 
< ItemTemplate> 
 {
 //title：'<％＃Regex.Replace（Eval（HotelNamelabel）。ToString（），/ \\W\\d\\\ \\ s\\\ [\\''] /，string.Empty）％>'，
lat：'<％＃Eval（Latitude）％>' ，
lng：'<％＃Eval（Longitude）％>'，
 //description：'<％＃Regex.Replace（String.Format（ 0}，{1}，{2}，Eval（HotelNamelabel），Eval（HotelLocation），Eval（HotelCity）），/ \\W\\d\\ S \\ [\\\\''] /，string.Empty）％>'
 
} 
 
< / ItemTemplate> 
< SeparatorTemplate> 
，
< / SeparatorTemplate> 
< / asp：中继器> 
]; 
 
 
 window.onload = function（）{
 var mapOptions = {
 center：new google.maps.LatLng（markers [0] .lat，markers [ 0] .lng），
 zoom：8，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 var infoWindow = new google.maps.InfoWindow（）; 
 var map = new google.maps.Map（document.getElementById（dvMap），mapOptions）; 
 google.maps.event.addDomListener（map，'resize'，function（）{
 alert（'div resize'）; 
 google.maps.event.trigger（map，'resize '）; 
}）; 
 
（i = 0; i< markers.length; i ++）{
 var data = markers [i] 
 var myLatlng = new google.maps.LatLng（data .lat，data.lng）; 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map，
 title：data.title 
}）; 
（function（marker，data）{
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（data.description）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data）; 
} 
 
 
} 
  

解决方案

on（'shown'，function（）{
google.maps.event.trigger（map，resize）; $ b $（'＃yourMapContainer'）。 b}）;
}）;

如果地图确实存在于隐藏的元素中，例如模态窗口，请将此调用放在单独的JS中文件，即您的主站点JS文件。

Hey i m working on google MAP ..I have implemented google map by using Google Maps ices, But when the page refresh map displaying only in the left top corner of div container, i.e displaying only the one forth portion of div container, and the other part is blank. but when i press F12 for inspecting the code (Firebug), it will display completely. i Can not understand what's going on...

  <div id="dvMap" >
      </div> 
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=false">

 </script>
<script type="text/javascript">
var map;  
var markers = [
       <asp:Repeater ID="rptMarkers" runat="server" >
       <ItemTemplate>
                {
                       // "title":  '<%#Regex.Replace(Eval("HotelNamelabel").ToString(),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>',
                        "lat": '<%# Eval("Latitude") %>',
                        "lng": '<%# Eval("Longitude") %>',
                       // "description": '<%#Regex.Replace(String.Format("{0} , {1} , {2}",Eval("HotelNamelabel"),Eval("HotelLocation"),Eval("HotelCity")),"/\\W\\d\\S\\[\\w'-]/",string.Empty) %>'

                    }

        </ItemTemplate>
        <SeparatorTemplate>
            ,
            </SeparatorTemplate>
            </asp:Repeater>
    ];


    window.onload = function () {
       var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"),  mapOptions);
            google.maps.event.addDomListener(map, 'resize', function(){
                alert('div resize');
                google.maps.event.trigger(map,'resize');
            });

          for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }


    }  

解决方案

Expanding on what Beetroot said in his comment, you can overcome the issue by using the following:

$(function () {
    $('#yourMapContainer').on('shown', function () {
        google.maps.event.trigger(map, "resize");
    });
});

If indeed the map is in a hidden element such as a modal window, place this call in separate JS file i.e. your main site JS file.

这篇关于谷歌地图只显示在左边的第四部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！