2012-02-02 94 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

我的答案中有一些語法錯誤,請忽略它。 現在我的工作已經完成。 我使用並製作另一個谷歌地圖的文件,並通過點擊我的標籤調用該框架。谷歌地圖工作非常好..