How do I add custom marker images to Google Maps using the GWT Maps API?

google-maps, gwt

Solution

This sample seems to cover what you want to achieve: IconDemo.java.

// Create our "tiny" marker icon
Icon icon = Icon.newInstance(
    "http://labs.google.com/ridefinder/images/mm_20_red.png");
icon.setShadowURL("http://labs.google.com/ridefinder/images/mm_20_shadow.png");
icon.setIconSize(Size.newInstance(12, 20));
icon.setShadowSize(Size.newInstance(22, 20));
icon.setIconAnchor(Point.newInstance(6, 20));
icon.setInfoWindowAnchor(Point.newInstance(5, 1));

MarkerOptions options = MarkerOptions.newInstance();
options.setIcon(icon);

// LatLng point; MapWidget map;
map.addOverlay(new Marker(point, options));

The live demo can be seen here: http://gwt.google.com/samples/HelloMaps-1.0.4/HelloMaps.html#Creating%20Icons

Problem

I'm working on a GWT app that's using Google Maps. I'm trying to add many lettered markers to my map. Originally, I had: ``` Marker marker = new Marker(point); marker.setImage("http://www.google.com/mapfiles/markerA.png"); map.addOverlay(marker); ``` But that didn't work. The call to setImage caused an exception in the maps API and nothing showed up on the map. I searched and found some half-answers talking about MarkerOptions, so I tried: ``` Icon icon = Icon.newInstance(Icon.DEFAULT_ICON); icon.setImageURL("http://www.google.com/mapfiles/markerA.png"); MarkerOptions ops = MarkerOptions.newInstance(icon); ops.setIcon(icon); Marker marker = new Marker(point, ops); map.addOverlay(marker); ``` This was a bit better in that my app was not throwing exceptions anymore and I was seeing marker shadows, but still no custom marker images. I would prefer a non-JSNI solution to this problem. Thanks!

Original source