Question

我是这个网站的新用户，我的网站页面有问题。我想在我的网站上显示谷歌地图它工作正常，但当我在tab 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.

Answer 1

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

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

Answer 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>

Answer 3

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

谷歌地图没有完全加载

3 个答案: