Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps custom label x and y position

Tags:

I am trying to adjust the x and y position of my custom label. Is this possible? I haven't come across any documentation regarding this issue as of yet.

numberMarkerImg = {     url: '../images/mobile/map-marker.png',     size: new google.maps.Size(32, 38),     scaledSize: new google.maps.Size(32, 38) };  // Letter markers marker = new google.maps.Marker({     position : point,     map      : map,     icon     : numberMarkerImg,     draggable: false,     labelClass: "labels",     label: {         text: saved_label,         color: 'black',         fontSize: '12px',         x: '200',         y: '100'     } }); 
like image 426
user992731 Avatar asked May 25 '16 15:05

user992731


Video Answer


2 Answers

"labelOrigin" ended up having to to be passed in since I am using a custom marker.

   numberMarkerImg = {         url: '../images/mobile/map-marker.png',         size: new google.maps.Size(32, 38),         scaledSize: new google.maps.Size(32, 38),         labelOrigin: new google.maps.Point(9, 9)    }; 
like image 149
user992731 Avatar answered Sep 28 '22 08:09

user992731


Google Maps API v3 doesn't let you set MarkerLabel position, there're no x and y options.

The doc also says:

If you are using it with a custom marker, you can reposition it with the labelOrigin property in the Icon class.

As I can see you're using custom marker so maybe this is the way to go for you.

Alternatively, have a look at MarkerWithLabel. Is an extension to the default Marker object with more options available. Small demo: http://jsfiddle.net/LLd4drvx/239/.

like image 41
martin Avatar answered Sep 28 '22 07:09

martin