GMAPS: mappa google maps con più marker con icone colorata

maps.js

function initialize() {
    
    var styles  = [
                {
                    stylers: [
                        { hue: '#0a436d' },
                        { visibility: 'simplified' },
                        { gamma: 0.5 },
                        { weight: 0.5 }
                    ]
                },
                {
                    elementType: 'labels',
                    stylers: [
                        { visibility: 'on' }
                    ]
                },
                {
                    featureType: 'water',
                    stylers: [
                        { color: '#0a436d' }
                    ]
                }
            ];
    
    var styledMap = new google.maps.StyledMapType(styles,
                                                  {name: "Styled Map"});
    
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(46.1512813,12.234383),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        },
        disableDefaultUI: true
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
    
    setMarkers(map, city);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var city = [
    ['Sede Bolzano', 46.1512813,12.234383, 2],
    ['Sede Belluno', 46.4737631,11.3292464, 1]
];

function setMarkers(map, locations) {
    
    var image = {
        url: '../assets/img/marker.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(32, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(0, 32)
    };
    
    var shape = {
        coords: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

//con info windows
function setMarkers(map, locations) {

        
        var image = {
            url: '<?php bloginfo('stylesheet_directory')?>/assets/img/marker.png' ,
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(50, 50),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
        };

        var shape = {
            coords: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };
        for (var i = 0; i < locations.length; i++) {
            var beach = locations[i];
            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                shape: shape,
                title: beach[0],
                zIndex: beach[3]
            });
            var content = "Loan Number: " + locations[i];
            var infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                };
            })(marker,content,infowindow)); 
        }
    }