How to Place Marker on Center of Polyline?


How to Place Marker on Center of Polyline?

Place Marker on center of polyline

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:

google maps marker not centred on polyline v3, Place Marker on center of polyline

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!

How to Place Marker on Center of Polyline? Reviewed by Ravi Kumar on 3:52 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.