165
rated 0 times
[
170]
[
5]
/ answers: 1 / hits: 30804
/ 10 Years ago, sat, july 19, 2014, 12:00:00
I tried several codes and searched a lot for an answer, but I can't get this to work. I know very little of Javascript, so i'm hopping someone can help me with this, cause i'm losing my mind with this. The markers are not toggling, just nothing happens.
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() {}
This is the 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>
This is the XML
Thank you so much for any help you can give!
<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>
More From » google-maps
