GMAPS: Mappa con pin e colori

gistfile1.phtml

<div class="row maps">
    <div class="col-md-12" id="map-canvas">
    </div>
</div>


<!--  Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

    var map;

    var MY_MAPTYPE_ID = 'custom_style';

    function initialize() {

        var featureOpts = [
            {
                stylers: [
                    { hue: '#0a436d' },
                    { visibility: 'simplified' },
                    { gamma: 0.5 },
                    { weight: 0.5 }
                ]
            },
            {
                elementType: 'labels',
                stylers: [
                    { visibility: 'on' }
                ]
            },
            {
                featureType: 'water',
                stylers: [
                    { color: '#0a436d' }
                ]
            }
        ];

        var myLatlng = new google.maps.LatLng(46.1512813,12.234383);
        var mapOptions = {
            zoom: 16,
            center: myLatlng,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
            },
            mapTypeId: MY_MAPTYPE_ID,
            disableDefaultUI: true,
            scrollwheel: false //disabilita lo scroll
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var styledMapOptions = {
            name: 'Custom Style'
        };

        var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

        map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
        
        var image = 'images/marker.png';
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!',
            icon: image
        });
    }

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

</script>