GWT Google Map (Static and Dynamic)

In my project, my client want to use Google map.
I had put the Google Map V3 but due to poor internet connection, the retrieval time is very slow. They want to use static map.

I decide to create an option for them to choose whether to use dynamic or static Google map. To change between dynamic and static just simply change the instance.

The dynamic map, I use a library from http://code.google.com/p/gwt-google-maps-v3/

SitemapPanel.java
package com.vcari.jscadav2.client;

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.google.gwt.user.client.Element;

public abstract class SiteMapPanel extends LayoutContainer{

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
    }
    
     public abstract void setMapCenter(Double latitude, Double longitude, int zoomLevel);
}



SiteMapStaticMapPanel.java (Static Map)
This solution is working for GWT 2.4. Please refer to my new post below for solution. http://peyotest.blogspot.com/2011/09/gwt-24-static-google-map-in-frame-not.html

package com.vcari.jscadav2.client;

import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Frame;

public class SiteMapStaticMapPanel extends SiteMapPanel {

    public SiteMapStaticMapPanel(){
        super();
    }    
    
    Frame frame = new Frame();

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        setLayout(new FitLayout());
        setBorders(false);
        add(frame);
    }
    
    /**
     * Set map center to the defined latitude and longitude
     * @param latitude
     * @param longitude
     */
    public void setMapCenter(Double latitude, Double longitude, int zoomLevel) {                
       Integer width=this.getWidth();
       Integer height=this.getHeight();
       String url="http://maps.google.com/maps/api/staticmap?center={0},{1}&zoom={2}&size={3}x{4}&maptype=roadmap&sensor=false";
       url+="&markers=color:red7C%{0},{1}";
       url=String.format(url, latitude,longitude,zoomLevel,width,height);
       url=url.replace("{0}", latitude.toString());
       url=url.replace("{1}", longitude.toString());
       url=url.replace("{2}", String.valueOf(zoomLevel));
       url=url.replace("{3}", width.toString());
       url=url.replace("{4}", height.toString());
       url=url.replace("{5}",  Application.areaName);
      
       frame.setUrl(url);
    }
}



Dynamics Google Map Version 3

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.vcari.jscadav2.client;

import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.maps.client.MapOptions;
import com.google.gwt.maps.client.MapTypeId;
import com.google.gwt.maps.client.MapWidget;
import com.google.gwt.maps.client.base.LatLng;
import com.google.gwt.maps.client.overlay.Marker;
import com.google.gwt.user.client.Element;

/**
 *
 * @author peyo
 */
public class SiteMapV3Panel extends SiteMapPanel {

    private Marker marker;
    private MapWidget mapWidget;

    public SiteMapV3Panel() {
        setLayout(new FitLayout());
                      
        final MapOptions options = new MapOptions();
        // Zoom level. Required
        options.setZoom(8);
        // Open a map centered on Cawker City, KS USA. Required
        options.setCenter(new LatLng(5.519216, 116.822204));
        // Map type. Required.
        options.setMapTypeId(new MapTypeId().getRoadmap());

        marker=new Marker();
        
        // Enable maps drag feature. Disabled by default.
        options.setDraggable(true);
        // Enable and add default navigation control. Disabled by default.
        options.setNavigationControl(true);
        // Enable and add map type control. Disabled by default.
        options.setMapTypeControl(true);
        mapWidget = new MapWidget(options);
        mapWidget.setSize("800px", "600px");
        add(mapWidget);
    }
    
   
    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
    }

    /**
     * Set map center to the defined latitude and longitude
     * @param latitude
     * @param longitude
     */
    public void setMapCenter(Double latitude, Double longitude, int zoomLevel) {                
        mapWidget.getMap().setZoom(zoomLevel);
        mapWidget.getMap().panTo(new LatLng(latitude, longitude));
        marker.setPosition(new LatLng(latitude, longitude));
        marker.setMap(mapWidget.getMap());
        marker.setTitle(Application.areaName);
    }
}

0 comments:

 
Copyright © peyotest