From ArcMap to Google Maps in 10 Easy Steps

At NCTCOG, we use ESRI's ArcGIS Desktop product for most of our GIS needs (version 9.3.1 at the time of this writing). More and more, however, we get asked to mashup various spatial datasets into a web-friendly form using mapping APIs such as Bing or Google Maps. In my last post, I discussed the development of a web map using Google Maps and ArcGIS Server that required a decent amount of custom coding and heavy lifting. For many tasks, however, there is no reason to make things this complicated, especially if you have a small number of points.

A recent item I was tasked with was to create a web map from a spreadsheet containing sustainable development case-study sites. Users needed to be able to click on a point to get basic information about the site and a link to a more detailed PDF. There were less than 50 points, so I decided to generate a static KML file to get the job done. Kevin Martin from the City of Portland Bureau of Planning has kindly created and posted an "Export to KML" ArcMap extension that we'll use to do this.

Note that if your source data is already in an ESRI spatial format such as shapefile or geodatabase feature class, you can skip steps 2 - 4 (but obviously you'll still need to open ArcMap and add your shapefile).

1) Download and install the Export to KML ArcMap extension (you'll need admin rights for the install)

2) Open a blank ArcMap document and set the appropriate projection for the coordinates you are working with. A shortcut to doing this is to load a shapefile or feature class that is already in the correct projection. In this example, the spreadsheet contained coordinates in State Plane (FIPS 4202 for North Central Texas). If your coordinates are already in latitude/longitude (decimal degrees), the coordinate system you should select is at Data Frame Properties-->Coordinate System Tab-->Select a coordinate system-->Predefined-->Geographic Coordinate Systems-->World-->WGS 1984.

3) Load the spreadsheet in ArcMap. Right-click on the newly added spreadsheet layer (in the Source tab of the Table of Contents), and select 'Display XY Data'. If they were not automatically chosen, select the appropriate spreadsheet columns to use for the X and Y fields and click 'OK' (do not set the coordinate system).

4) Export the new XY events layer that was just created to a shapefile (use the coordinate system of the data frame) and add it to the map.
 

5) Click the Export to KML icon.  If you don't see it, right-click on any ArcMap menu and select 'Export to KML' from the menu list. If you don't have this option, it is not installed correctly. Select the new shapefile from the last step as your layer to export. There are a lot of options available in this tool that you can play around with, but here's what I used: Under Options-->Export Options tab: check the box that says 'Create Google Maps compatible descriptions'. Under Options-->Labeling and Description tab: Select an attribute for naming each feature (this will be the first line in the Google Maps info window) and add some optional HTML in the 'Feature description expression' field to design your info window contents. I used this:
 

<font size="-1"><br>
<strong>Location:</strong> [Location]<br>
<strong>Uses:</strong> [Uses]<br>
<strong>Notes:</strong> [Notes]<br>
<strong>Typology:</strong> [Typology]<br><br>
<a href="docs/[ID].pdf">More Information</a>
</font>

Notice the 'More Information' link. For this to work, PDFs must be added to a 'docs' folder in the web directory with the naming convention of 'x.pdf', where x is the unique ID of the site.

6) Save your KML file to a web-accessible location. Note: Our server is not configured for KML MIME-types, so I named the extension to '.xml' rather than '.kml', which can still be added using the GGeoXml object below. Depending on your server configuration, you may have to do the same.

7) Paste the following code inside the head tag of your web page. Note that you will need to sign up for your own Google Maps API key and replace the one you see below. You'll also need to change the location of the kml file reference as noted below:
 

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcRhm9JfOYaiJEDdKsdN5iRRLoqfmfP4Tw-36gNTGEjCz74fmTRRhHLDWR4bjMeaQnhaJs3L_Qd_BjA" type="text/javascript"></script>
<script type="text/javascript">
    var gmap = null;
    var kmlLayer = null;
   
    function initialize() {

        gmap = new GMap2(document.getElementById("gmap"));
        var centerat = new GLatLng(32.9, -97);  //change the center coordinates here

        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.addMapType(G_PHYSICAL_MAP); //optional:  add the nice Google terrain basemap
        gmap.setMapType(G_PHYSICAL_MAP); //optional:  set the terrain basemap to display as default
        gmap.enableScrollWheelZoom();
        gmap.setCenter(centerat, 9);


        kmlLayer = new GGeoXml("http://www.visionnorthtexas.org/NTAF/casestudies/studymap.xml"); //change reference to your kml file location here
        gmap.addOverlay(kmlLayer);
    }
    
</script>

8) in the body tag, add this: onLoad="initialize()" so it will look something like this:
 

<body onLoad="initialize()">

9) Add this wherever you want in the body section of your web page:

<div id="gmap" style="width: 700px; height:600px;"></div>

You can change the width and height values as needed.

10) If you want to use a custom icon, change the 'href' value in the style tag of your kml file to reference the png icon of your choice, as seen below. Note that Google Maps caches your kml, so if you do not see the change reflected when you reload the page, you can trick it into updating by renaming the kml file and updating the reference to it in your web page code.

<Style id="FEATURES">
    <IconStyle>
      <color>FF009C00</color>
      <scale>0.333333333333333</scale>
      <Icon>
        <href>http://www.visionnorthtexas.org/NTAF/casestudies/redstar.png</href>
      </Icon>
    </IconStyle>
    <LabelStyle>
      <color>00FFFFFF</color>
    </LabelStyle>
</Style>  

That's it. See the result here.