Adding a Google base layerΒΆ

This section describes how to add the ability to add a Google Maps layer to the viewer application.

Warning

Before adding Google components to your applications, make sure that the Google Terms of Use allow you to do so.

Navigate to the src/app/app.js in the myviewer directory. Open up this file in a text editor. In the API documentation, find gxp.plugins.GoogleSource. This provides the base Google Maps functionality.

The ptype for gxp.plugins.GoogleSource is gxp_googlesource. Open up app.js, and configure this source:

google: {
    ptype: "gxp_googlesource"
}

Next search for the layers section, and add a Google base layer:

{
    source: "google",
    name: "ROADMAP",
    group: "background"
}

In the build config at the top of app.js, add a dependency line for plugins/GoogleSource.js.

* @require plugins/GoogleSource.js

Finally, restart your application. There will now be a new base layer called “Google RoadMap” in our viewer:

../../../_images/viewer_google.png