Google maps Javascript: adding user photo to a marker

I have profile pages for users of my little card game, like this one - where I display their position by looking up their city. My current jQuery code is here:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(function() {
    // the city name is inserted here by the PHP script
    findCity('New-York');
});

function createMap(center) {
    var opts = {
        zoom: 9,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map"), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode( { "address": city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            开发者_StackOverflowvar map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos
            });
        }
    });
}

</script>
......
<div id="map"></div>

and it works well, but I only get a simple red marker with a dot displayed:

Is there please a way to display the user avatar instead of the simple marker?

I have URLs for user pictures in my database (together with names, cities, etc.)

They are mostly big images (bigger than 200x300).

The Google maps API does support custom icons, and it's explained in their documentation here.

An example can be found here