Как отобразить HTML в информационном блоке в Google Maps V3 из XML
Я анализирую данные из XML-файла, который отображает расположение маркеров, и эта часть отлично работает. Я пытаюсь добавить информацию в информационное окно через HTML с информацией из файла XML. Вот как это должно выглядеть.
http://www.mesquiteweather.net/images/Annual%20Fatal%20Tornado%20Summaries.png
Но если вы перейдете на мою тестовую страницу и нажмете на маркер, он не будет отображаться таким образом.
http://www.mesquiteweather.net/xml/googlemapkt.html
У меня есть код, который я пытаюсь создать в окне информации.
<script type="text/javascript">
var customIcons = {
"-1": "/images/icons/mm_1_white.png",
"0": "/images/icons/mm_20_white.png",
"1": "/images/icons/mm_20_orange.png",
"2": "/images/icons/mm_20_green.png",
"3": "/images/icons/mm_20_blue.png",
"4": "/images/icons/mm_20_red.png",
"5": "/images/icons/mm_20_black.png"
};
var lineColor = {
"-1": "#FFFFFF",
"0": "#FFFFFF",
"1": "#FFA500",
"2": "#008000",
"3": "#0000FF",
"4": "#FF0000",
"5": "#000000"
};
var infowindow = new google.maps.InfoWindow();
// start here
var summary_html = "";
var csummary_html = "";
var total_html = "";
var gmarkers = [];
var i = 0;
var j = 0;
var thisurl = '2013.xml';
// this is called from xml processing loop below
function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) {
var marker = new google.maps.Marker({position: point, icon: customIcons[ef]});
// this makes the info bubble text/info
var yy = dt.substr(-4);
if (ef == "-1") {
ef = " Not rated yet";
}
var html = "<b>" + yy + " Killer Tornado #" + yrnum + "</b> <br/>" + dt + " " + tm + " CST<br/>";
html += "Fatalities: " + dead + ", EF" + ef + "<br/>";
html += "County, State: " + loc + ", " + st + "<br/>";
html += "Home:" + h + " MHome:" + m + " Outside:" + o + " Bldg:" + p + " Vehicle:" + v + " Unk:" + unk + "<br/>";
var ww = watch.substring(2,6);
// alert(yy);
if (watch != "NONE" && yy == 2013) { // update to current yy and change other links below!!!
link = '<a href="http://www.spc.noaa.gov/products/watch/ww' + ww + '.html" target="_blank">' + ww + '</a>';
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>";
}
if (watch != "NONE" && yy >= 2004 && yy <= 2012) { // ww archive back to 2004
link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html" target="_blank">' + ww + '</a>';
html += "In SPC Watch# " + link + " (Click to open SPC watch page)<br/>";
}
if (watch != "NONE" && yy < 2004) { // No archive!
//link = '<a href="http://www.spc.noaa.gov/products/watch/' + yy + '/ww' + ww + '.html">' + ww + '</a>';
html += "In SPC Watch# " + ww + "<br/>";
}
if (watch == "NONE") {
html += "No Watch in Effect.<br/>";
}
function getInfoWindowEvent(marker, html) {
infowindow.setContent(html);
infowindow.open(map, marker);
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
getInfoWindowEvent(marker, html);
});
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], 'click');
}
function initialize() {
var myLatlng = new google.maps.LatLng(32.775833, -96.796667);
var myOptions = {
panControl: false,
zoom: 4,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.mesquiteweather.net';
});
}
var logoControlDiv = document.createElement('DIV');
var logoControl = MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
downloadUrl(thisurl, function(data) {
var markers = data.documentElement.getElementsByTagName("fatalities");
for (var i = 0; i < markers.length; i++) {
var yrnum = markers[i].getAttribute("yrnum");
var dt = markers[i].getAttribute("dt");
var tm = markers[i].getAttribute("time");
var ef = markers[i].getAttribute("ef");
var st = markers[i].getAttribute("st");
var loc = markers[i].getAttribute("location");
var watch = markers[i].getAttribute("watch");
var dead = markers[i].getAttribute("deaths");
var h = markers[i].getAttribute("h");
var m = markers[i].getAttribute("m");
var o = markers[i].getAttribute("o");
var v = markers[i].getAttribute("v");
var p = markers[i].getAttribute("p");
var unk = markers[i].getAttribute("unk");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("slat")),
parseFloat(markers[i].getAttribute("slon")));
var epoint = new google.maps.LatLng(parseFloat(markers[i].getAttribute("elat")),
parseFloat(markers[i].getAttribute("elon")));
var marker = createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch);
marker.setMap(map);
var polyline = new google.maps.Polyline({
path: [point, epoint],
strokeColor: lineColor[ef],
strokeOpacity: 0.8,
strokeWeight: 2
});
polyline.setMap(map);
}
});
}
function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) {
var marker = new google.maps.Marker({position: point, icon: customIcons[ef]});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: loc});
infowindow.open(map, marker);
});
return marker;
}
</script>
Я думаю, что это как-то связано с последней функцией в конце, но я застрял, потому что знаю, что это неправильно, и я все перепробовал. Я все еще нахожусь в процессе изучения новых Gmaps, поскольку я не использовал их в течение многих лет.
Любые предложения или советы будут великолепны!
-Спасибо!
1 ответ
Решение
ОБНОВЛЕНИЕ: проблема в том, что у вас есть две разные функции createMarker. Удалите или переименуйте тот, который не должен использоваться (тот, который не создает переменную html в правильной форме).
Ваша функция createMarker ничего не делает с передаваемой информацией (кроме loc), вам нужно добавить ее в информационное окно, отформатированное так, как вы хотите:
function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) {
var marker = new google.maps.Marker({position: point, icon: customIcons[ef]});
google.maps.event.addListener(marker, "click", function() {
var contentStr = loc // + other information, formatted as you want...
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentStr});
infowindow.open(map, marker);
});
return marker;
}