Setting of anchorpoint for Markers

[kochstef]

From what I have found there is currently no way to define the anchorpoint of a Marker and it currently always is the bottom center of the marker image. Would there be a way to work around this or implement it? Setting the anchor points would enable to for example create directional markers like this.

Or is there any other way to draw the heading/direction of a Marker?

[paodb]

Hello. With the current API there's no direct way to set anchor points. I did some investigation and anchor points are given to the markers through it's icon property. You can use the element API to be able to send more data to it. The data should be send as json.

If you're setting the marker's icon with an url, you can do something like

JsonObject markerIconJson = Json.createObject();
markerIconJson.put("url", Markers.GREEN);
JsonObject markerIconPointJson = Json.createObject();
markerIconPointJson.put("x", 20);
markerIconPointJson.put("y", 35);
markerIconJson.put("anchor", markerIconPointJson);

If you're using a svg icon you need to define a path instead of an url, something like this:

JsonObject markerIconJson = Json.createObject();
markerIconJson.put("path",  "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z");
JsonObject markerIconPointJson = Json.createObject();
markerIconPointJson.put("x", 20);
markerIconPointJson.put("y", 35);
markerIconJson.put("anchor", markerIconPointJson);
//  An you can also set other attributes as rotation, fillColor, strokeColor, fillOpacity, etc; 
markerIconJson.put("rotation", 180.0);
markerIconJson.put("fillColor", "black");

Then you create the marker as usual and set the json info using getElement().setPropertyJson

GoogleMapMarker myMarker = new GoogleMapMarker("My Marker", googleMap.getCenter(), false);
myMarker.getElement().setPropertyJson("icon", markerIconJson);
googleMap.addMarker(myMarker);

Let us know if this helps you.