尝试将谷歌地图添加到Vaadin视图

Question

我试图在我们的网络应用程序上使用Vaadin GoogleMaps plugin来显示一个包含Google地图的小窗口。我有这个：

private GoogleMap googleMap;
private LatLon mapMarkerlatLon;
private GoogleMapMarker googleMapMarker;
private final String apiKey = "https://maps.googleapis.com/maps/api/js?key=<ourKey>=initMap";

@Override
public void enter(ViewChangeEvent event) {

    //googleMap = new GoogleMap(apiKey, null, null);
    //As suggested:
    googleMap = new GoogleMap(apiKey, null, "english");         

    mapMarkerlatLon = new LatLon(0,0);
    googleMap.setCenter(mapMarkerlatLon);
    googleMapMarker = new GoogleMapMarker("Tal", mapMarkerlatLon, false);
    googleMap.addMarker(googleMapMarker);
    initializeViewContent();
}

我的课程更进一步..

protected CssLayout initializeViewContent() {
    CssLayout sideBarLayout = new CssLayout();
    sideBarLayout.addStyleName("sidebar");
    /* ... */
    sideBarLayout.addComponent(googleMap);
    return sideBarLayout;
}

课堂上有更多的东西，但基本上这是重要的＆＃34;位。当我加载页面时，我得到了这个：

或多或少，翻译成英文，它说＆＃34;发生错误。此网页未正确加载Google地图。在Javascript控制台上发现技术细节。＆＃34;

编辑：Firfeox控制台与我对此主题的了解一样重要。 Chrome控制台告诉我缺少keyMapError。

我已尝试将关键格式改为：

• {ourKey}
• {ourKey} = initMap
• 键= {ourKey} = initMap

而且，我已经厌倦了玩组合。关键是有效的，因为它是通过一个完美无缺的小型演示给我的。

我做错了什么？