Adding a Google Geocoder search fieldΒΆ

This section describes how to add the ability to add the Google Geocoder 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 the gxp.plugins.GoogleGeocoder tool. This provides the geocoding functionality.

This plugin requires the Google Maps v3 API to be present in the application. Add the following script tag to index.html in your app directory:

<script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>

Now open up app.js again, and add the tool configuration for this plugin. We want the geocoder field to show up in the map’s top toolbar:

{
    ptype: "gxp_googlegeocoder",
    outputTarget: "map.tbar",
    outputConfig: {
        emptyText: "Search for a location ..."
    }
}

Add the plugin to the list of dependencies in app.js. The file name is plugins/GoogleGeocoder.js.

  * @require plugins/GoogleGeocoder.js

Restart the application and reload the browser.  The Google Geocoder will now be in the viewer:
../../../_images/viewer_geocoder.png