javascript - google maps change cursor to image pick offset -

I have made Google Maps cursor my own image, this is a specific specific point of image. The website allows people to click anywhere on the map so that they can make markers when they are exact latitude / underlines. The problem is that since the image is a fixed point (the bottom center of the image), everyone thinks where that point is where the marker will go, instead the marker goes to the upper left of the image, and with the appropriate number of pixels Is closed

What I need is a way of offset the image, when there is a click, it actually happens that the point of the image is instead of the point being automatically raised Which is on top left Is closed

I have tried to close the image in Photoshop but it does not do this. I have seen through Google Maps API, but nothing has been done.

Any ideas about how to accomplish this?

You will get the basic formula for getting it

 PixelCurodinate = World Coordinate * 2 Click the  zoom level  

, click the world, calculate pixel coresite, add offset, count new WorldCoordinate and you have the desired status.

You will need two functions of converting Letleng to pixel (and vice versa):

Sample-Function:

  accept a cursor / anchor with the size of google.maps.event.addListener (map, 'click', function (e) {// 22 * ​​40 var //, base (above) To left) 0,0 / lower middle 11,40 anchors = new google.maps.Point (11,40), // map-projection, desired late-long project = this is necessary to calculate the tag (), // click latlng pos = e.latLng; // Power of map-zoom Power = Math.pow (2, map.getZoom ()), // World-Coordinate / Receive, will be equal to pixel-coordinate zoom 0 point = proj.fromLatLngToPoint (pos), // new world Calculate anchor offsetpoint = synchronize based on new google.maps.Point ((point.x * power + anchor.x) / power, (point.y * power + anchor.y) / power), // change it back Do a LatLng offsetPosition = proj.fromPointToLatLng (offsetpoint); // New google.maps.Marker ({status: offsetPosition, map: map}); });  

Demo: