How to Place Marker on Center of Polyline?

Place Marker on center of polyline

In my previous article I explained about How to Show Google Map Multiple Markers Info Window in Java Script - API Google Maps v3.

Here I have to draw a polyline and markers on google map but the problem is markers are not sitting on the top of polyline i.e they shifted top left and they look like they are in some distance from the polyline while the should be on top centered of them. To resolve this problem we have to set anchorX, anchorY for the image. Find the source code below:

function CreateImageObject(ImageName, sizeX, sizeY, anchorX, anchorY) {

    // setting marker image path

    var image = new google.maps.MarkerImage("LocationMarkers/" + ImageName + ".png",

    new google.maps.Size(sizeX, sizeY),    // This marker is 20 pixels wide by 32 pixels tall.

    new google.maps.Point(0, 0),              // The origin for this image is 0,0.

    new google.maps.Point(7, 7)); // The anchor for this image is the base of the flagpole at 0,32.

   
return image;

}

Note: Here new google.maps.Point(7, 7) takes offset number in pixels.Initial position 0,0 falls in the center bottom of the marker so I offset the image by half of  it's width and height.

Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!