当前位置: 动力学知识库 > 问答 > 编程问答 >

api - Map won't show right in Joomla

问题描述:

I have the following code of a map using api google, I have tested the code in several html editor and its work perfectly, but when i upload in my web page doesn’t work. The map appears all zoomed in some random point in the ocean. I create an article in Joomla 1.5.20, paste the code. Its shows right in the preview but not in the web page. I disable filtering and use none editor and still won’t work. Thanks for the help.

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

网友答案:

The problem was solve using dropbox to host the KML files insted google maps.

分享给朋友:
您可能感兴趣的文章:
随机阅读: