2.3 Authoring content in Google Earth and bringing it into Google Maps

While you have learned how to create placemarkers using the Google Maps API, this is not always the best authoring environment as you have to manually type in each latitude and longitude value. This tutorial will take you through the steps of:

  1. creating content in Google Earth
  2. exporting it as a KMZ file
  3. adding it to your maproom

Creating content in Google Earth

Let’s begin by launching Google Earth. Zoom in to a desired location. In this example, we will zoom into the UCLA campus.

google earth ucla

google earth ucla

Now go to Add, Folder.  Give your folder a descriptive name of the layer you will create.  In this example, we will name it “UCLA Parking Structures”.  Once the folder is created, you can add objects as placemarks, polygons, lines and images to it.

Making sure that the folder you created is highlighted, create objects for your layer:

ucla parking

ucla parking

Exporting a Google Earth layer as a KMZ file

Once you are done authoring your layer in Google Earth, you need to export it as a KMZ file.

  1. Right click on the folder containing your layer objects
  2. Click on “save place as”
  3. Save the file, and make sure there are no spaces in the file name
  4. In this example, the file was saved as “UCLAParking.kmz”
  5. Upload the file to your web space.  As a suggestion, create a folder named “week2”, and inside this folder, create another folder called “kmz”.  Put your KMZ file in here.  The link to the layer would be “http://www.yohman.com/students/2012/yoh/kmz/UCLAParking.kmz”

Adding the KMZ layer to your maproom

Now let’s add the code to add this layer in your maproom.  First, let’s declare a variable that will “hold” the contents of this layer.  The variable needs to be declared in the global space, outside of any functions.

Once you have declared the variable for your layer, you can add the code in the initialize function to generate and render the kmz file you just created:


Dummy?? At this point, you may be wondering “hey, what’s that ‘dummy’ parameter doing in the url?” The dummy parameter in the URL is there because… Google cache’s KML’s. What this means is that if you load a kml once, it will cache it, and every time you access it again, it will use the cached version of the KML. This means that if you make any changes to the KML layer, it will not be reflected immediately. To avoid this, we need to add a dummy parameter to the URL, and by tacking on the current date/time (these are built in javascript functions), it ensures that the URL is unique.

Here is what the entire code would look like:

Leave a Reply