2012-02-02 131 views
0

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

回答

0

我认为这是一个很好的机会,你的问题是相关的事实,地图位于一个隐藏的div(封闭jQuery的选项卡),然后点击时才显示在标签上。

我也遇到过这个问题,并使用在这个线程提出的解决方案解决了这个问题:Google map display from a hidden area

0

试试这个,它很容易通过只是改变你想要的纬度经度&控制和也把标记图像通过你的自我。

<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> 
+0

我也遇到了同样的问题。无论如何感谢您的支持。 – 2012-02-02 13:12:27

0

我的答案中有一些语法错误,请忽略它。 现在我的工作已经完成。 我使用并制作另一个谷歌地图的文件,并通过点击我的标签调用该框架。谷歌地图工作非常好..