Google maps API: Why can't I set the icon of my markers by using relative icon paths?

Question

These are my marker options

var markerOptions = {
                clickable: true,
                draggable: false,
                flat: true,
                map: map,
                icon: 'food.png',
                optimized: true,
                position: pos,
                title: name,
                visible: true,
                animation:google.maps.Animation.DROP,
            };

'food.png' is in the same folder of the javascript file. However it doesn't work.

If I use the full http path it works fine. For example

http://localhost/javascript/food.png

is it possible to avoid this?

Answer 1

The icon image needs to be in the same directory as the HTML page it is being referenced from, not the same directory as the javascript.

Update: as webaware pointed out a relative path to the icon should be relative to the directory containing the HTML document.

The example from the documentation works fine both on the Google site and locally on my machine.