Web Maps with the Google Maps API

Web Maps with the Google Maps API You will need: 1. A free Google Maps API key only if you exceed 25,000 map views in a day or want to monitor traffic...
Author: Solomon Baker
2 downloads 0 Views 715KB Size
Web Maps with the Google Maps API You will need: 1. A free Google Maps API key only if you exceed 25,000 map views in a day or want to monitor traffic 2. A local web server, or access to your web server for some very minimal configuration 3. Ability to place files on your web server

Optionally Obtain a Google Maps API key A Google Maps API key is not needed if all applications on your website generate 25,000 or less map loads per day (ie visitors to your map, not individual map images requested). You can get free key if you want to track usage. You may also need a key if your website generates income. To obtain a key go to: https://code.google.com/apis/console/?noredirect&pli=1

Create your kmz file You probably already know that Google Maps and Earth will read kml and kmz files. A kmz file is just a zipped kml file. ArcMap will create kmz files. 1. Symbolize your mxd with any data that you would like to display. Turn off any fields (like the shape field and objectID) that you don’t want to show up when a user clicks on a feature on the map. 2. Use the Layer to KML geoprocessing tool to export a kmz file. You’ll find this in the conversion tools toolbox. 3. Place the kmz file on your webserver where it is publicly accessible. If you want to take a look at the contents of your kmz file, and even edit it, just change the kmz extension to zip, and then unzip it. You can rezip and change back to kmz when done.

Create your web map html file 1. Pasted at the end of this document is some html. Paste this into a text document and rename it to index.html. Save this file to your web server. 2. You can use this file verbatim with only one change. Find the reference to mykmzFile.kmz,and change it to the path and file name of the kmz file you created above. You will also notice that the map is centered on Nevada county, and a zoom level is set. You can play around with those two parameters to center and zoom to a different location.

Accessing your KMZ file You can host the file on your web server, or you can upload it to Google Drive. Option 1 - Uploading to Google Drive

1. Go to Drive.google.com and upload the file by clicking the upload button 2. Then choose Share

3.

4. Click on the kmz file in the list of files 5. Choose File->embed this map. This will give you some html code that you can add to a web map to add this kmz as a layer. Option 2 - Place on your Web Server Your web server must be configures to recognize .kmz files. This is done by adding the kmz MIME type to your web server configuration. In IIS this is achieved by clicking on MIME types in the features view, then clicking on Add.. in the Actions Pane. Then add extension .kmz with MIME type of “application/vnd.google-earth.kmz” as in the screen shot below.

Google Fusion Tables A fusion table is a data storage tool available on Google Drive. The advantages are that you can store large files (up to 100 MB), geocode addresses. Just like a kmz, you can also share with others and make a map. You must have a free Google account. The example below shows how to upload a table with addresses and add it to a map. 1. Create a comma delimited (csv table) with a list of addresses in one of the columns. In my case, I have a list of emergency shelters, that looks like this:

2. Go to drive.google.com 3. Click on create , then “Connect more apps”. Type fusion into the search tool and click on fusion tables. 4. Click on Create again, and then choose fusion tables

.

5. Click on Choose File and browse to the location of your exported csv. Click through the dialogs and finish. 6. Choose Edit->Change Columns. Then click on the location column and choose Type Location.

7. To geocode and see a map, Click on +> Add map

You will see a dialog similar to below as the locations are geocoded

8. If you want someone else to see the map, or want to add the points to another web map, you will need to share it publicly. To do so, click on share in the upper right corner, click the Change button

9. Then choose one of the first 2 radio buttons and choose save. Share the link with others.

10. If you want to reference the fusion table in a web application, you don’t use the link above, but rather a unique Fusion Table ID. Choose File->About this table to get the unique ID.

11. Copy the ID above into your html file as below: var fusionLayer = new google.maps.FusionTablesLayer("your Table ID Here"); fusionLayer.setMap(map);

Sample HTML Document for a Google Map with KML and Fusion Table Layer html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } function initialize() { var mapOptions = { center: new google.maps.LatLng(39.273444,-121.026785), zoom: 8

}; var map = new google.maps.Map(document.getElementById("mapcanvas"),mapOptions); var layer = new google.maps.KmlLayer({driveFileId: "yourKMLID"}); layer.setMap(map); var fusionLayer = new google.maps.FusionTablesLayer("yourTableID"); fusionLayer.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);

Suggest Documents