Joshua Java

Animated GMap dropped marker with GWT

Posted on: October 29, 2008

Yesterday we were evaluating GWT to be used as a wrapper for the GMap API. And one thing we need in our apps is to be able to drop marker and follow where the last marker is dropped.

Let’s say that you have configured your GMap module as explained from here. Now just replace and overwrite your Module with this code:

public class GMap implements EntryPoint {
    MapWidget map;
    static final int TIMEOUT = 30;
    List<LatLng> tmpPointList = new ArrayList<LatLng>();

    class LatitudeLongitude {
        private double latitude;
        private double longitude;

        public LatitudeLongitude(double latitude, double longitude) {
            this.latitude = latitude;
            this.longitude = longitude;
        }

        public double getLatitude() {
            return latitude;
        }

        public double getLongitude() {
            return longitude;
        }
    }

    // GWT module entry point method.
    public void onModuleLoad() {
        LatLng city = LatLng.newInstance(-34.402130, 150.899139);

        map = new MapWidget(city, 17);
        map.setSize("500px", "300px");
        map.setScrollWheelZoomEnabled(true);
        map.addControl(new MapTypeControl());

        LatitudeLongitude point;
        List<LatitudeLongitude> pointList = new ArrayList<LatitudeLongitude>();
        // Change from this point with your own coordinates.
        point = new LatitudeLongitude(-34.402130, 150.899139);
        pointList.add(point);

        point = new LatitudeLongitude(-34.402239, 150.900324);
        pointList.add(point);

        point = new LatitudeLongitude(-34.403191, 150.900188);
        pointList.add(point);

        point = new LatitudeLongitude(-34.404122, 150.899975);
        pointList.add(point);

        point = new LatitudeLongitude(-34.405421, 150.899713);
        pointList.add(point);

        point = new LatitudeLongitude(-34.406351, 150.899245);
        pointList.add(point);

        point = new LatitudeLongitude(-34.407102, 150.898747);
        pointList.add(point);

        point = new LatitudeLongitude(-34.407932, 150.898080);
        pointList.add(point);

        point = new LatitudeLongitude(-34.409443, 150.897013);
        pointList.add(point);

        point = new LatitudeLongitude(-34.410098,150.896829);
        pointList.add(point);

        point = new LatitudeLongitude(-34.411022,150.897490);
        pointList.add(point);

        point = new LatitudeLongitude(-34.411949,150.898663);
        pointList.add(point);

        point = new LatitudeLongitude(-34.412683,150.899658);
        pointList.add(point);

        Timer timer;

        int i = 0;
        for (final LatitudeLongitude ll : pointList) {
            i += 1;
            timer = new Timer() {
                public void run() {
                    addPoints(ll.getLatitude(), ll.getLongitude());
                }
            };

            timer.schedule(i * 500);
        }

        // Add some controls for the zoom level
        map.addControl(new LargeMapControl());

        // Add an info window to highlight a point of interest
        map.getInfoWindow().open(map.getCenter(),
                new InfoWindowContent("Start from here"));

        // Add the map to the HTML host page
        RootPanel.get("maps").add(map);
    }

    private void addPoints(double latitude, double longitude) {

        LatLng point = LatLng.newInstance(latitude, longitude);
        if (tmpPointList.size() == 2) {
            tmpPointList.remove(0);
        }
        tmpPointList.add(point);
        Marker marker = new Marker(point);

        map.addOverlay(marker);
        map.panTo(point);

        LatLng[] points = tmpPointList.toArray(new LatLng[0]);

        Polyline line = new Polyline(points);
        PolyStyleOptions lineStyle = PolyStyleOptions.getInstance();
        lineStyle.setColor("red");
        line.setStrokeStyle( lineStyle );
        map.addOverlay(line);
    }
}

And replace the coordinates to drop the markers as you desire. This will follow where the last marker is dropped.

About these ads
Tags:

3 Responses to "Animated GMap dropped marker with GWT"

[...] Animated GMap dropped marker with GWT Some code to create an animated GMap drop marker. [...]

demo???please

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: