谷歌地图未完全加载答案

【问题标题】：google map is not loading fully谷歌地图未完全加载
【发布时间】：2012-02-02 11:05:10
【问题描述】：

我是这个网站的新手，我的网站页面有些问题。我想在我的网站上显示谷歌地图的地方它工作正常，但是当我在标签 jquery 下使用它时（http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min。 js），我用于一一显示内容。它没有正确加载。请在我的网站上的位置地图选项卡下查看地图。链接如下。

http://www.21flats.com/beta/property_detail/16/8/Ranikhet/Ranikhet.html

    <script type="text/javascript">
                 var lat=document.getElementById('lat').value;
                 var lon=document.getElementById('lon').value;
                 setTimeout(getlocation(lat,lon), 100);

                 function getlocation(lat,lon)
                 {
                  google.maps.event.addDomListener(window, 'load', function() {

                    var map = new google.maps.Map(document.getElementById('map'), {
                      zoom: 13,
                      center: new google.maps.LatLng(lat,lon),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var infoWindow = new google.maps.InfoWindow;

                    var onMarkerClick = function() {
                      var marker = this;
                      var latLng = marker.getPosition();
                      infoWindow.setContent('<h3>This is my project:</h3>' +
                          latLng.lat() + ', ' + latLng.lng());

                      infoWindow.open(map, marker);
                    };
                    google.maps.event.addListener(map, 'click', function() {
                      infoWindow.close();
                    });

                    var marker1 = new google.maps.Marker({
                      map: map,
                      position: new google.maps.LatLng(lat,lon)
                    });

                    google.maps.event.addListener(marker1, 'click', onMarkerClick);



                  });
                  }
                </script>

  <div id="map" style="width: 640px;height: 450px;border:1px solid #999999;"></div>
  ..m using this how can i call "google.maps.event.trigger(map, 'resize')" this function in my function.

【问题讨论】：

标签： php jquery

【解决方案1】：

我认为您的问题很有可能与地图位于隐藏的 div（关闭的 jquery 选项卡）中，并且仅在单击选项卡时显示。

我遇到过这个问题并使用此线程中提出的解决方案解决了它：Google map display from a hidden area

【讨论】：

【解决方案2】：

试试这个，只需更改您想要的纬度和经度即可轻松控制，还可以自己放置标记图像。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
                var settings = {
                    zoom: 12,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};
                var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Area name</h1>'+
                    '<div id="bodyContent">'+
                    '<p align="left" >P.O.Box : 666666 - Dubai, UAE <br> Tel : (+971) 789789789</p>'+
                    '</div>'+
                    '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                var companyImage = new google.maps.MarkerImage('images/marker.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                );
                var companyPos = new google.maps.LatLng(25.2894045564648903, 51.49017333985673);
                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    title:"Location Name",
                    zIndex: 3});

                google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });
            }
        </script>

    <body onLoad="initialize()">
        <div id="map_canvas" style="width:400px; height:460px"></div>
    </body>

【讨论】：

我也遇到了同样的问题。无论如何感谢您的支持。

【解决方案3】：

我的回答有语法错误，请忽略。现在我的工作完成了。我正在使用并为谷歌地图制作另一个文件，并在点击我的标签时调用该框架。现在谷歌地图工作得很好..

【讨论】：