var customIcons = {
restaurant: {
icon: 'img/homepage/screen_3/map_pins/restaurante.png'
},
cafenele: {
icon: 'img/homepage/screen_3/map_pins/cafenele.png'
},
shopping: {
icon: 'img/homepage/screen_3/map_pins/shopping.png'
},
muzee: {
icon: 'img/homepage/screen_3/map_pins/arhitectura-muzee.png'
},
distractie: {
icon: 'img/homepage/screen_3/map_pins/distractie.png'
},
spa: {
icon: 'img/homepage/screen_3/map_pins/spa-&-aquapark.png'
}

};


var markerGroups = {
"restaurant": [],
"cafenele": [],
"shopping": [],
"muzee": [],
"distractie": [],
"spa": []
};



function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.059516, 21.947613),
zoom: 13,
scrollwheel: false,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file

var bounds = new google.maps.LatLngBounds();
downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id_marker = markers[i].getAttribute("id_marker");
var name = markers[i].getAttribute("name");
var category = markers[i].getAttribute("category");
var address = markers[i].getAttribute("address");
var img = markers[i].getAttribute("img");
var phone = markers[i].getAttribute("phone");
var schedule = markers[i].getAttribute("schedule");
var link = markers[i].getAttribute("link");
document.getElementById('categorii').src = img;
var type = markers[i].getAttribute("type");

var afla = "Afla mai multe";

var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<pre style='border:0 !important;padding:0; background-color: white;line-height:0.5; font-family:GothamBook;display:block;margin: 0 0 10px;word-break:break-all;word-wrap:break-word;'><p class='google-maps-3'>" + schedule + "</p></pre>" +  "<a class='google-maps' id='aflamulte' href=''>" + afla + "</a>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
id_marker: id_marker,
image: img,
link: link,
type: type
});

if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
marker.setVisible(false);
bindInfoWindow(marker, map, infoWindow, html);

}
map.fitBounds(bounds);
toggleGroup("spa");

});

}


function toggleGroup(type)
{

for (var key in markerGroups)
{
for (var i = 0; i < markerGroups[key].length; i++)
{
var marker = markerGroups[key][i];

if (type == key) {

marker.setVisible(true);

} else
{
marker.setVisible(false);
}       
}

}
}



function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);

document.getElementById('aflamulte').href = marker.link;
document.getElementById('categorii').src = marker.image;

});
}

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() {
}