6
Próbowałem kilku kodów i dużo szukałem odpowiedzi, ale nie mogę tego zrobić. Wiem bardzo niewiele o JavaScript, więc skaczę, że ktoś może mi w tym pomóc, bo tracę z tym zdanie. Markery nie przełączają się, nic się nie dzieje.Google Maps Marker Pokaż/ukryj
var customIcons = {
monumento: {
icon: 'images/monumento_ico.png'
},
hotel: {
icon: 'images/hotel_ico.png'
},
restaurantes: {
icon: 'images/restaurante_ico.png'
},
museus: {
icon: 'images/museu_ico.png'
}
};
var markerGroups = { "museus": [], "monumentos": [], "restaurantes": [], "hotel": []};
var gmarkers = [];
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
map.set('styles', [
{
zoomControl: false,
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ color: "#ffd986" }
]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{ color: "#9e574f" }
]
},{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
{ color: "#d0cbc0" },
{ weight: 1.1 }
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -100 }
]
}, {
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ hue: '#ffff00' },
{ gamma: 1.4 },
{ saturation: 82 },
{ lightness: 96 }
]
}, {
featureType: 'poi.school',
elementType: 'geometry',
stylers: [
{ hue: '#fff700' },
{ lightness: -15 },
{ saturation: 99 }
]
}
]);
downloadUrl("markers.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
type: type
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.isHidden()) {
marker.show();
} else {
marker.hide();
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
Jest to HTML:
<div class="map_wrap">
<div class="siderbarmap">
<ul>
<input id="monumentoCheckbox" type="checkbox" onclick="toggleGroup('monumento')">
<input id="museusCheckbox" type="checkbox" onclick="toggleGroup('museus')">
<input id="restaurantesCheckbox" type="checkbox" onclick="toggleGroup('restaurantes')">
<input id="hotelCheckbox" type="checkbox" onclick="toggleGroup('hotel')">
</ul>
</div>
<div id="map" style="width:100%;height:585px; z-index: 1;"></div>
To XML Dziękuję bardzo za wszelką pomoc można dać!
<markers>
<marker name="Castelo" address="Rua da Condessa de Valença" lat="38.64351973190569" lng="-8.216521812152905" type="monumento" />
<marker name="Anta 1 de Tourais" address="Estrada Nacional 114" lat="38.64260059929888" lng="-8.159376865959189" type="monumento" />
<marker name="Hotel da Ameira" address="Herdade da Ameira" lat="38.64109640475479" lng="-8.180432206726096" type="hotel" />
<marker name="Hotel Montemor" address="Avenida Gago Coutinho 8, 7050-248 Montemor-o-Novo" lat="38.64925541964039" lng="-8.216489625644726" type="hotel" />
<marker name="Restaurante Monte Alentejano" address="Av. Gago Coutinho 8" lat="38.6492329" lng="-8.216665" type="restaurantes" />
<marker name="Restaurante A Ribeira" address="Rua de São Domingos" lat="38.6347498199708" lng="-8.206468892765088" type="restaurantes" />
<marker name="Núcleo Museológico do Convento de S. Domingos" address="" lat="38.643139" lng="-8.212732" type="museus" />
<marker name="Centro Interpretativo do Castelo de Montemor-o-Novo" address="Rua Condessa de Valença" lat="38.64258748216167" lng="-8.21467108793263" type="museus" />
</markers>
Co ty próbujesz zrobić? Co działa? Czego nie ma? Jakie napotkasz błędy javascript? – geocodezip
Jak wygląda Twój XML? Podaj przykład [Minimal, Complete, Tested and Readable] (http://stackoverflow.com/help/mcve) – geocodezip
Dziękujemy za odpowiedź @geocodezip! Przykro mi, że zapomniałem wyjaśnić problem. Edytowałem post. Jeszcze raz dziękuję! – user3676940