Google Maps API - Offset for Marker Image - Replace Marker - Not at GeoPosition

Question

I've an image (a circle) which should indicate a specific metropolitan area. Also I've got the GeoPosition of all my relevant areas.

If I place my markers, the bottom-center of my image is at the marker's GeoPosition. But because its an aerial view I'd like to give the image an offset, so the center of my cirle-image is at that GeoPosition...

Any ideas how to achieve this?

Thanks!

Answer 1

Thanks to LeJared I found the solution. My problem was that I thought that MarkerImage replaces the Marker. But you have to define the image first and insert it later in the Marker.

Example:

First define the image:

var image = new google.maps.MarkerImage("some/path/image.png",
        // This marker is 20 pixels wide by 32 pixels tall.
        null, 
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point(75, 35)
    );

Then insert it into the regular marker:

    var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: "My Title",
    });

Answer 2

Starting from Google API version 3.11, MarkerImage was replaced by Icon. So here is the new way to scale a marker to 50px and position it so that its center is on the geolocation:

var image = {
        url: '/some/path/image.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(25, 25),
        scaledSize: new google.maps.Size(50, 50)
    };

var myMarker = new google.maps.Marker({
      position: position,
      icon: image,
      title: 'title',
      map: map
    });

Answer 3

You have to specify where the anchor point in your markerImage is. See docs: https://developers.google.com/maps/documentation/javascript/reference?hl=de#MarkerImage

If not specified google assume the center of the bottom edge of your markerImage as anchor point.

Here is an example at the API docs how to build a complex marker with correct markerImage: https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=de