地圖將不會顯示在Joomla

我有以下代碼的地圖使用API谷歌，我已經測試了幾個HTML編輯器中的代碼和它的工作完美，但是當我在我的網頁上傳不起作用。地圖顯示全部放大了海洋中的某個隨機點。我在Joomla 1.5.20中創建一篇文章，粘貼代碼。它顯示在預覽中，但不在網頁中。我禁用過濾和使用無編輯器，仍然無法正常工作。謝謝您的幫助。地圖將不會顯示在Joomla

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBInlv7FuwtKGhzBP0oISDoB2Iu79HNrPU&sensor=false"> 
    </script> 
    <script type="text/javascript"> 



var map; 

// lets define some vars to make things easier later 



var kml = { 
    a: { 
     name: "Productor", 
     url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" 
    }, 
    b: { 
     name: "A&S", 
     url: "https://maps.google.hn/maps/ms?ie=UTF8&authuser=0&msa=0&output=kml&msid=200984447026903306654.0004c94bac74cf2304c71" 
    } 
// keep adding more if ye like 
}; 

// initialize our goo 
function initializeMap() { 
    var options = { 
     center: new google.maps.LatLng(13.324182,-87.080071), 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=5&hl=es&ie=UTF8&oe=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94bc3bce6f638aa1'); 
     ctaLayer.setMap(map); 

var ctaLayer = new google.maps.KmlLayer('https://maps.google.hn/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c94ec7e838242b67d'); 
     ctaLayer.setMap(map); 

    createTogglers(); 
}; 

google.maps.event.addDomListener(window, 'load', initializeMap); 




// the important function... kml[id].xxxxx refers back to the top 
function toggleKML(checked, id) { 

    if (checked) { 

     var layer = new google.maps.KmlLayer(kml[id].url, { 
      preserveViewport: true, 
      suppressInfoWindows: true 
     }); 

google.maps.event.addListener(layer, 'click', function(kmlEvent) { 
      var text = kmlEvent.featureData.description; 
      showInContentWindow(text); 
     }); 

     function showInContentWindow(text) { 
      var sidediv = document.getElementById('content_window'); 
      sidediv.innerHTML = text; 
     } 

     // store kml as obj 
     kml[id].obj = layer; 
     kml[id].obj.setMap(map); 
    } 
    else { 
     kml[id].obj.setMap(null); 
     delete kml[id].obj; 
    } 

}; 


// create the controls dynamically because it's easier, really 
function createTogglers() { 

    var html = "<form><ul>"; 
    for (var prop in kml) { 
     html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + 
     " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + 
     kml[prop].name + "<\/li>"; 
    } 
    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + 
    "Limpiar el Mapa<\/a><\/li>" + 
    "<\/ul><\/form>"; 

    document.getElementById("toggle_box").innerHTML = html; 
}; 

// easy way to remove all objects 
function removeAll() { 
    for (var prop in kml) { 
     if (kml[prop].obj) { 
      kml[prop].obj.setMap(null); 
      delete kml[prop].obj; 
     } 

    } 
}; 


// Append Class on Select 
function highlight(box, listitem) { 
    var selected = 'selected'; 
    var normal = 'normal'; 
    document.getElementById(listitem).className = (box.checked ? selected: normal); 
}; 



</script> 

<style type="text/css"> 
.selected { font-weight: bold; } 
</style> 

</head> 
<body> 
<div id="map_canvas" style="width: 80%; height: 400px; float:left"></div> 
<div id="toggle_box" style="position: absolute; top: 100px; right: 640px; padding: 10px; background: #fff; z-index: 5; "></div> 
<div id="content_window" style="width:10%; height:10%; float:left"></div> 
</body> 
</html>

來源

2012-09-11 user1653126

html，body和map_canvas需要** **寬度和高度。 – Marcelo

沒有工作，但謝謝。 – user1653126

這個問題是使用Dropbox來解決谷歌地圖的KML文件託管的問題。

來源

2012-09-13 05:08:25 user1653126

地圖將不會顯示在Joomla

回答

相關問題