I've changed the google maps cursor to be my own image. This image has a certain distinct point to it. The website allows people to click somewhere on the map to create a marker at the exact latitude/longitude that they pick.
The problem is that the since the image has a certain point (bottom center of image) to it, everyone thinks that where that point is, is where the marker will go. Instead the marker goes to the top left of the image, and is off by a fair number of pixels.
What I need is a way to offset the image so that when a click happens, it happens exactly where the point of the image is, instead of the automatically picked point which is off to the top left.
I've tried to put the image itself off center in photoshop but that doesn't do it. I've looked through google maps apis but nothing popped out.
Any ideas on how to accomplish this?
The basic formula to achieve it you'll find at https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates
pixelCoordinate = worldCoordinate * 2zoomLevel
Get the worldCoordinate of the click, calculate the pixelCoordinate, add the offset , calculate the new worldCoordinate and you have the desired position.
You'll need two functions to convert LatLng's to Pixel(and vice versa):
fromLatLngToPoint() and fromPointToLatLng()
sample-function:
google.maps.event.addListener(map, 'click', function(e){
//assume a cursor with a size of 22*40
var //define the anchor, the base(top-left) is 0,0
//bottom middle will be 11,40
anchor = new google.maps.Point(11,40),
//the map-projection, needed to calculate the desired LatLng
proj = this.getProjection(),
//clicked latLng
pos = e.latLng;
//the power of the map-zoom
power = Math.pow(2,map.getZoom()),
//get the world-coordinate
//will be equal to the pixel-coordinate at zoom 0
point = proj.fromLatLngToPoint(pos),
//calculate the new world-coordinate based on the anchor
offsetPoint = new google.maps.Point(
(point.x*power+anchor.x)/power,
(point.y*power+anchor.y)/power
),
//convert it back to a LatLng
offsetPosition = proj.fromPointToLatLng(offsetPoint);
//done
new google.maps.Marker({ position:offsetPosition, map:map});
});