Google maps changes cursor to image offset

Question

I changed the Google Maps cursor to my own image. This image has a certain point of view. The website allows people to click somewhere on the map to create a marker with the exact latitude / longitude that they choose. The problem is that since the image has a certain point (the lower center of the image), everyone thinks that where this point is, there is a marker. Instead, the marker moves to the upper left of the image and is disabled using a large number of pixels.

I need a way to shift the image, so when a click occurs, it happens exactly where the image point is, and not the automatically selected point, which is in the upper left corner.

I tried to center the image in Photoshop, but it is not. I looked at google maps apis but nothing came of it.

Any ideas on how to do this?

Answer 1

The basic formula for achieving it can be found at https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates

pixelCoordinate = worldCoordinate * 2 zoomLevel

Get click worldCoordinate, calculate pixelCoordinate, add offset, calculate new worldCoordinate and you have the desired position.

You will need two functions to convert LatLng to pixel (and vice versa):

fromLatLngToPoint() and fromPointToLatLng()

sampling 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});
  });

: http://jsfiddle.net/doktormolle/NYh7g/