Integrating the Google Maps API Geocoder with ArcGIS Server GeoCh...

http://geochalkboard.wordpress.com/2008/08/29/integrating-the-google-...

Integrating The Google Maps API Geocoder With ArcGIS Server

Posted on August 29, 2008. Filed under: ESRI, Google Maps |

Today Ill continue my series of posts on the new ArcGIS Server JavaScript API with a post that describes how you can integrate the Google Maps API geocoder with ArcGIS Server. I expect this to be a long running series so weve created a new page (ArcGIS Server JavaScript API Posts) at the top of the blog that provides a handy reference to previous posts. In this post Im going to use the Portland_ESRI_Landbase_AGO map service from ESRIs Sample Server 1 ArcGIS Server instance as a base layer, and well show how you can geocode an address using the Google Maps API. This address will then be represented as a point graphic created from the ArcGIS Server JavaScript API. You could certainly use an ESRI locator service to do the geocoding, but its a fun exercise and useful if you dont have access to a geocoding service. This is a very simple example with a hard-coded address meant only to show the potential for integration. Click here to see the example and then well discuss the code used to create this simple application. As I mentioned above the data for this application was pulled from an ArcGIS Server map service provided by ESRI, and the graphic point was generated based on an address that was geocoded by the Google Maps API. If youd like to see the code simply right click the page and then select View Page Source. In a previous post I covered the basic ArcGIS Server JavaScript API code you use to reference the API, create a map, and add layers so Im not going to cover any of those details in this post. Instead, Id like to focus on how you can use the Google Maps API to geocode addresses, and add them to your ArcGIS Server generated map as graphic objects. Step 1: Reference the Google Maps API Before creating an instance of the Google Maps API geocoding object (GClientGeocoder) you must provide a reference to the API. This is accomplished as follows:

Note: You must have a Google Maps API key to access objects within the API. Step 2: Create an Instance of GClientGeocoder The GClientGeocoder class from the Google Maps API can be used to geocode addresses, and an instance of this class is created as follows:

Step 3: Call the getLatLng( ) method on GClientGeocoder

The getLatLng( ) method on GClientGeocoder accepts an address as the first parameter, and the second parameter is a callback function that will be run when data is returned from the method. A point object will be passed into the callback function. If the geocode of an address was successful this point will have geometry (x,y coordinates), and in the event that the object was not geocoded the point object will be null. Notice that in this case weve hard-coded an address that will be input into the getLatLng( ) method. This of course wouldnt be acceptable in a real application, but the point here is simply to show how the objects work. Step 4: Create ESRI Point, Symbol, and Graphic Objects As I mentioned in the last step, the getLatLng( ) method returns data in the form of a point object to the callback function which is then run. If the address was successfully geocoded, the point object will contain longitude and latitude coordinates which can be accessed through the lng( ) and lat( ) methods seen below. These coordinates are stored in the theX and theY variables. Next, we use the JavaScript alert function to display the coordinates of the geocoded address. At this point were done with the Google Maps API, and simply need to transfer the coordinates into an ESRI point object and display the point as a graphic on the display. We use the latitude, longitude coordinates as input to the constructor for an esri.geometry.Point object. To create the graphic for the point we need to create a symbol and a graphic. In this case, since were working with a point, we use the SimpleMarkerSymbol object. After creating an instance of the symbol the setStyle( ), setColor( ) and setSize( ) methods are used to define the characteristics of our symbol. In this case, we

1 of 2

05-Dec-12 5:59 PM

Integrating the Google Maps API Geocoder with ArcGIS Server GeoCh...

http://geochalkboard.wordpress.com/2008/08/29/integrating-the-google-...

create a red circle set to a size of 12. Finally, we create a graphic object, passing in our point and symbol.

Step 5: Add the Graphic to the Display In the code sample above, the map.graphics.add(pointGraphic) method adds our newly created graphic to the graphic list for the application. Any number of graphics of various types can be placed into this graphic list and each object is drawn on the display. If youd like more information on how to create ArcGIS Server and Google Maps applications with their respective APIs you might want to consider our upcoming course which still has 4 seats available. Contact eric at geospatialtraining.com for more information.
About these ads

Live the Bond Lifestyle

Be the first to like this.

Make a Comment

2 of 2

05-Dec-12 5:59 PM