Take the 2-minute tour ×

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"> 

$(function() {
    // the city name is inserted here by the PHP script

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;
            var map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos

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

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

map with a marker

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).

Thank you! Alex

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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

An example can be found here

share|improve this answer
Thanks, but what about resizing the pictures, is it necessary? –  Alexander Farber Apr 28 '11 at 13:34
As far as I know there isn't a limit to icon sizes concerning Google Maps not working. However I would recommend making them smaller yes because big icons like those would certainly be in the way visually. –  Kokos Apr 28 '11 at 13:37
add comment

Yes. Look at this piece of the documentation regarding MarkerOptions and MarkerImage. That will work for you.

share|improve this answer
add comment

Your Answer


