MarkerWithLabel moving when zooming

Question

I have a problem with on my google map I am using MarkerWithLabel and importing my own image label, the problem is when I zoom in and out the marker is moving south east from the original point. I don't know why because using a normal marker everything is normal and the marker stick on its positions. Below the link to the fiddle of my map. Can someone tell me how to make this marker not moving from original point when zooming ?

Thanks.

http://jsfiddle.net/pfxvno07/1/

var latLng = new google.maps.LatLng(48.864716, 2.349014);


 var map;
  var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(48.864716, 2.349014),
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true,
                panControl:true,
                zoomControl:true,
                mapTypeControl:true,
                scaleControl:true,
                streetViewControl:true,
                overviewMapControl:true,
                rotateControl:true
}

map = new google.maps.Map(document.getElementById('map'), mapOptions);


                var marker = new MarkerWithLabel({
                    position: latLng ,
                    draggable: false,
                    //raiseOnDrag: true,
                    map: map,
                    labelContent: 10+1,
                    labelAnchor: new google.maps.Point(0, 0),
                    labelClass: "label"+2, //the CSS class for the label
                    labelStyle: {opacity: 1},
                    icon: { url: '', size: null, origin: null, anchor: null}
                });

Answer 1

Set the correct anchor for the icon. You are using it in a non-standard way. This works for me:

var marker = new MarkerWithLabel({
  position: latLng,
  draggable: false,
  map: map,
  labelContent: 10 + 1,
  labelAnchor: new google.maps.Point(16, 29),
  labelClass: "label" + 2, //the CSS class for the label
  labelStyle: {
    opacity: 1
  },
  icon: {
    url: 'http://momentale.com/resources/images/icon/mapPin_2.png',
    size: new google.maps.Size(32, 29)
  }
});

working code snippet:

 var latLng = new google.maps.LatLng(48.864716, 2.349014); var map; var mapOptions = { zoom: 15, center: new google.maps.LatLng(48.864716, 2.349014), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: true, panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true, rotateControl: true } map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new MarkerWithLabel({ position: latLng, draggable: false, //raiseOnDrag: true, map: map, labelContent: 10 + 1, labelAnchor: new google.maps.Point(16, 29), labelClass: "label" + 2, //the CSS class for the label labelStyle: { opacity: 1 }, icon: { url: 'http://momentale.com/resources/images/icon/mapPin_2.png', size: new google.maps.Size(32, 29) } }); 

 #map { width: 600px; height: 600px; position: relative; top: 2px; left: 28px; } .label2 { height: 29px; width: 32px; color: white; font-weight: bold; font-family: Tahoma; font-size: 12px; text-align: center; background-image: url('http://momentale.com/resources/images/icon/mapPin_2.png'); } 

 <script src="http://maps.google.com/maps/api/js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/markerwithlabel/src/markerwithlabel.js"></script> <div id="map"></div> 

working fiddle