Add multiple different complex icons AND info boxes to google maps api V3

Add multiple different complex icons AND info boxes to google maps api V3

I'm developing a site for some holiday accommodation (it's my first site
development).
I've been working on the location page with google maps api V3 and want to
take it further. At the moment I have just two custom markers - but want
to extend this so I have around 20, to show various things to do in the
area. These will be divided into categories such as 'family' and
'shopping', each category having a different marker icon. So I will need
say 5 different icon styles, each style at around 4 different locations.
On top of this I will need an info box on each, which will popup when the
marker is clicked, and will disappear when another marker is clicked.
I'm brand new to javascript and it still looks very complicated to me, so
if anyone can explain how to do this it would be greatly appreciated.
Current code below, and how it currently looks is here:
http://www.upthorpelodges.co.uk/test/location.html
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.316, 0.901),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
setMarkers(map, lodge);
}
var lodge = [
['Lodges', 52.316, 0.901],
['Other', 52, 1],
];
function setMarkers(map, locations) {
var image = {
url: 'http://s20.postimg.org/kq92v5uqh/homepin.png',
size: new google.maps.Size(32, 45),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 45)
};
var shadow = {
url: 'http://s20.postimg.org/65s00bzrt/homepin_shadow.png',
size: new google.maps.Size(36, 23),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(4, 23)
};
var shape = {
coord: [16, 0, 0, 16, 16, 45, 32 , 16],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var lodge = locations[i];
var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: lodge[0],
zIndex: lodge[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>