Juravskiy Vitaliy`s blog

Это пример использования Java Script библиотеки Yandex Map API через JSNI (Java Script Native Interface) в GWT.

Пример довольно простой, для отображения одного экземпляра класса.  Кто разберется, тот может сделать лучше ;)

Класс отвечающий за создание Java Script объекта:

public class YMapsPanel extends HTML {

private double latitude;
private double longitude;
private int zoom;

public YMapsPanel(double latitude, double longitude, int zoom) {
    getElement().setId("ymap");
    getElement().setAttribute("style", "width:600px;height:400px");
    this.latitude = latitude;
    this.longitude = longitude;
    this.zoom = zoom;
}

protected void onLoad() {
    init(getElement().getId(), latitude, longitude, zoom);
}

private native JavaScriptObject init(String id, double lat,
                                                double lon, int zoom) /*-{
    var el = $doc.getElementById(id);
    if(el == null) return null;
    var map = new $wnd.YMaps.Map(el);
    map.setCenter(new $wnd.YMaps.GeoPoint(lon,lat), zoom, $wnd.YMaps.MapType.HYBRID);
    return map;
}-*/;

}

Отображение на странице и точка входа GWT:

public class MapTester implements EntryPoint {

public void onModuleLoad() {
    SimplePanel panel = new SimplePanel();
    panel.setSize("400px", "400px");
    panel.add(new YMapsPanel(50, 10, 2));
    RootPanel.get().add(panel);
}

}

Подключаем в index.html ссылку на yandex map api

<script src="http://api-maps.yandex.ru/1.0.3/?key=AP_JbUkBAAAAO0APBQMAZgGGKZqIKMmRDJwfN0enUZD1R8cAAAAAAAAAAAB5Jg3D4sMkVd6DxzmwfS3sJnVnqg==" type="text/javascript"></script>

Ключ api взят из примеров самого api, и подходит для localhost. Если вы хотите опубликовать свое приложение на хостинге, то для использование api, необходимо по доменному имени сайта получить api key, и заменит этот ключ

key=AP_JbUkBAAAAO0APBQMAZgGGKZqIKMmRDJwfN0enUZD1R8cAAAAAAAAAAAB5Jg3D4sMkVd6DxzmwfS3sJnVnqg==

на свой.

Смотрим в браузере

Скомпилированный пример в виде war файла: War файл (463)