This example show how to add a custom icon to the map.

Marker sizes are expressed as a Size of X,Y where the origin of the image (0,0) is located in the top left of the image.
Origins, anchor positions and coordinates of the marker increase in the X direction to the right and in the Y direction down.

You will find 3 overloads for creating an Icon

This method will give you the more fine grained control over the marker customization. This method will receive the URL of the image along with the size, origin and anchor point. The URL could be either a virtual or an absolute path.

public MarkerBuilder Icon(string path, Size size, Point point, Point anchor)

The following sample will show you how to use it.

@{
    // This marker is 20 pixels wide by 32 pixels tall.
    var size = new Size(20, 32);
    // The origin for this image is 0,0.
    var origin = new Point(0, 0);
    // The anchor for this image is the base of the flagpole at 0,32.
    var anchor = new Point(0, 32);
    Html.Googlemap()
        .Name("map")
        .Markers(marker =>
        {
            marker.Add()
                .Latitude(23d)
                .Longitude(-82.3d)
                .Title("Hello World!")
                .Icon("~/Images/beachflag.png", size , origin, anchor)
                .Draggable(true);
        })
        .Render();
}

The following method will receive the URL of the image along with it's size. By default this method will assume the marker position will be in the middle of the bottom line of the marker image.

public MarkerBuilder Icon(string path, Size size)

The following method will receive the URL. By default this method will assume the image size will be 32x32 px and marker position in the middle of the bottom line of the marker image.

public MarkerBuilder Icon(string path)