谷歌地圖 - 加載時禁用了所有按鈕

我正在爲客戶端編寫一個Wordpress頁面，該頁面顯示基於從數據庫加載的數據的一些文本和Google地圖。谷歌地圖 - 加載時禁用了所有按鈕

到目前爲止，我已經獲得了大部分工作。然而，谷歌地圖開始加載神祕的「布魯斯」，只顯示看起來像海洋的所有其他選項（放大/縮小，街道視圖等）灰顯。

有可從螢火蟲等
包含地圖（#container的，和＃地圖帆布）的div被設置爲實際像素值沒有JavaScript錯誤。
給出here的解決方案不會產生積極的結果。

這是最終的結果是什麼樣子：

What it looks like

任何想法將是非常歡迎的。

編輯：每個請求代碼剪斷：

echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>'; 
     echo ' 
      <div id="container" style="height:500px;width:500px;"> 
       <div id="information"> 
        <h2>'.$detail['name'].'</h2> 
        <p>'.$detail['description'].'</p> 
        <p>'.$detail['address'].'</p> 
       </div> 
       <div id="map-canvas" style="width:300px;height:200px;"> 
       </div> 
      </div> 
     ';

取消精縮了JS的版本：

function initialize(lat,lng,name) { 
lat = parseFloat(lat); 
lng = parseFloat(lng); 
var ourLocation = new google.maps.LatLng(lat,lng); 
var marker; 
var map; 
    var mapOptions = { 
     center: ourLocation, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    marker = new google.maps.Marker({ 
     map: map, 
     draggable: false, 
     animation: google.maps.Animation.DROP, 
     position: ourLocation, 
     title:name 
    }); 
    google.maps.event.addDomListener(window,"load",initialize); 
}; 

jQuery(function($){ 
    initialize(lat,lng,name); 
    // the variables lat, lng, and name are replaced with php variables in the code 
});

來源

2013-06-12 Matt Walther

請粘貼您的代碼片段。謝謝。 – AlvinArulselvan

@AlvinArulselvan完成 –

您是否嘗試初始化您的容器div上面的map-canvas div？ – AlvinArulselvan

我想通了。花了一段時間，但...

Wordpress討厭jQuery調用由於某種原因或另一種。

我注意到，在JS控制檯中，如果我使用變量從初始化函數中調用初始化函數，那麼地圖會在之間奇蹟般地工作。

我不是使用jQuery，而是使用windows onload事件。

window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }

哪個神奇的作品。經驗教訓，jQuery和Wordpress就像草莓巧克力牛奶和印度淡啤酒：它們混合不好。

謝謝大家的貢獻。

來源

2013-06-12 23:25:27

谷歌地圖 - 加載時禁用了所有按鈕

回答

相關問題