Integrating the Google Maps API Geocoder with ArcGIS Server

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

Today I’ll 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 we’ve 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 I’m going to use the Portland_ESRI_Landbase_AGO map service from ESRI’s Sample Server 1 ArcGIS Server instance as a base layer, and we’ll 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 it’s a fun exercise and useful if you don’t 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 we’ll 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 you’d 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 I’m not going to cover any of those details in this post.  Instead, I’d 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 we’ve hard-coded an address that will be input into the getLatLng( ) method.  This of course wouldn’t 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 we’re 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 we’re 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 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 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 you’d 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 for more information.


Make a Comment

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: