CODEWITHSUNDEEP
gwtgoogle-maps
Eric Landry
Eric Landry

Reputation: 648

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

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!

Upvotes: 6

Views: 11715

Answers (3)

Jonata Russi
Jonata Russi

Reputation: 1

Here is my code in 3.10 Version

LatLng centerIcon = LatLng.newInstance(-25.90307367246304, -48.82550597190857);
MarkerImage markerImage = MarkerImage.newInstance("http://someIcon.png");
MarkerOptions mOpts = MarkerOptions.newInstance();
mOpts.setIcon(markerImage);
mOpts.setPosition(centerIcon);

Marker marker = Marker.newInstance(mOpts);
marker.setMap(mapWidget);

Upvotes: -1

Eric Landry
Eric Landry

Reputation: 648

Here's my new working solution (thx again igro):

Icon icon = Icon.newInstance("http://www.google.com/mapfiles/markerA.png");
icon.setIconSize(Size.newInstance(20, 34));
MarkerOptions ops = MarkerOptions.newInstance(icon);
Marker marker = new Marker(point, ops);
map.addOverlay(marker);

Upvotes: 2

Igor Klimer
Igor Klimer

Reputation: 15321

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

Upvotes: 10

Related Questions