Introducing the Mapplets API Demo Gallery

Tuesday, April 14, 2009

Due to the popularity of the demo galleries for our JavaScript and Flash APIs, we've added a demo gallery to the Mapplets API documentation as well. The demo gallery shows Mapplets created by both Google engineers and 3rd party developers, and provides links so that you can easily view the XML or use the Mapplet in Google Maps. You can learn from the demos how to do things like display KML files, store user preferences, localize your gadget to many languages, render custom tile layers on top of the base map, and more. Many of the demos come straight out of Sterling Udell's fantastic book, "Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS: From Novice to Professional".

Browse through the demo gallery, and post in our new dedicated Mapplets API forum if you have questions (or a demo to contribute!).

Tours in KML: animating the camera and content in Google Earth

Friday, April 10, 2009

If you're reading this blog, there's a good chance that you've seen or made some awesome geographic data visualizations in KML. Which means you know all too well that it can be hard to grasp the full story behind a visualization, especially a 3D visualization, without being guided through it. If you're like me, you might even have created KML files with giant Placemarks labeled "Start Here" and "Now go Here" and "Great View -- click on me!" If you're like me, you also felt dirty after doing that. It feels kind of like writing Perl -- you do it sometimes, but you don't really like to talk about it.

With the launch of Google Earth 5.0, we tackled this problem by introducing the ability to record and play your own tours through the world. Tours are a bit like interactive videos inside of Google Earth. Like a video, you can guide people on narrated journeys around the world and through your data, and you can rewind and fast forward. But when you pause a tour, unlike video, you can wander around in 3D. We included a shiny user interface for creating simple tours from inside of Google Earth 5.0, but underneath the hood tours are encoded as a powerful set of extensions to the KML language, that are much more expressive than the current recording functionality in Google Earth 5.0. In brief, these KML elements specify the timeline of the tour... a sequence of actions that tells Google Earth how to move the user through the world. They also allow you to modify and interact with your data presentation. In developing this language, we wanted to give developers precise control over all aspects of a tour. Not only can you control the movement of the camera, but you can play sound files, pop open info balloons, toggle the visibility of features, manipulate the time slider, and even animate the position and styling of content.

Below is a snippet of an example KML file containing a placemark and a tour. In the tour, the camera first flies to a good viewing location for the placemark and opens the placemark's info balloon for a few seconds. Then it closes the balloon, and proceeds to animate the size of the placemark icon and the color of the label using the <gx:AnimatedUpdate> action. It's an easy-to-read example for KML developers, but don't expect it to win an Oscar any time soon. On the other hand, it does show off the structure of a basic tour pretty well...

    ... see full file for the entire example ...

<!-- Our tour. The Playlist inside contains the
   sequence of actions that compose the tour. -->
<gx:Tour>
<name>Example Tour</name>
<gx:Playlist>

  <!-- Fly to the view of the placemark in 5.2 seconds. -->
  <gx:FlyTo>
    <gx:flyToMode>bounce</gx:flyToMode>
    <gx:duration>5.2</gx:duration>
    <LookAt>
      <longitude>-78.19074499027175</longitude>
      <latitude>35.31730443852049</latitude>
      <altitude>0</altitude>
      <range>10704.41142132794</range>
      <tilt>58.57687432675979</tilt>
      <heading>-76.75532143327891</heading>
      <altitudeMode>relativeToGround</altitudeMode>
    </LookAt>
  </gx:FlyTo>

  <!-- Open the balloon of the placemark. -->
  <gx:AnimatedUpdate>
    <gx:duration>0.0</gx:duration>
    <Update>
      <targetHref/> <!-- Left empty to refer to the current file -->
      <Change>
        <Placemark targetid="pm1">
          <gx:balloonVisibility>1</gx:balloonVisibility>
        </Placemark>
      </Change>
    </Update>
  </gx:AnimatedUpdate>

    ... and so on ...
To get started learning the language, you can make tours in Google Earth and save them as KML, reading the source for inspiration. Or you can dive straight into our KML developer tutorial for touring. If you're planning on generating tours programmatically, be sure to check out our open source KML parsing and generating library, which added full support for reading and writing Touring KML on the same day that Google Earth 5.0 came out.

Additionally, we recently released tour support in the Google Earth Plugin version 5.0. With this, it's now easy to integrate cinematic Google Earth presentations directly into your web content, complete with sound! See the plugin tour API example for details. Or check out the new tour gallery and touring gadget for more examples and techniques for putting tours into web pages.

Tours can be as long and as complicated as you want, so just let creativity be your guide in telling your story. Whether you're following GPS traces, modeling the ocean currents, mapping city population over time, or simply showing the good restaurants in your neighborhood, if you're serious about sharing your geo-data with the world, consider making some tours to accompany your KML file. You already have great visualizations lying around, so now show them off in style with a tour!

Google Earth Plugin Five-O: Ocean, Touring, and More!

Thursday, April 02, 2009

Labels: ,

Last month, the Google Earth team made a splash in the news (pun intended) with the release of Google Earth 5.0. The update included the ability to dive underwater to explore the world's oceans, record and play back narrated tours, view historical imagery, and explore Mars in 3D. Today, our team is happy to announce the 5.0 version of the Google Earth Plugin!

Playing tours in the Google Earth PluginOcean in the Google Earth PluginMars in the Google Earth Plugin

If you've already installed the plugin, you should see the new version automatically within the next day or two. If not, you can download the plugin for Windows or Mac OS X by visiting any Earth API web site, such as Monster Milktruck and clicking 'Get The Google Earth Plugin now'.

We've added many of Google Earth 5.0's new capabilities to the plugin and API, as well as a few other frequently requested features. Here is a list of major new features in the plugin and API:

  • Ocean: Underwater terrain and the ocean surface are now available, along with support for the clampToSeaFloor and relativeToSeaFloor altitude modes. In the Earth API, these are ALTITUDE_CLAMP_TO_SEA_FLOOR and ALTITUDE_RELATIVE_TO_SEA_FLOOR, respectively. (See example)
  • (Issue 180) Tour playback: This is via KmlTour and GETourPlayer in the API. To play tours, you must first either parseKml or fetchKml a file containing a <gx:Tour>, and then use GETourPlayer to play the tour. (See example)
  • (Issue 43) Programmatic photo overlay viewing: This is via KmlPhotoOverlay and GEPhotoOverlayViewer in the API. See the note on touring above for details on how to do this, or see the example page.
  • (Issue 181) Mars: On plugin startup, you can connect to the Mars dataset instead of Earth. (See example)
  • (Issue 7) Time slider: The standard Google Earth time slider UI will pop up upon loading KML containing time primitives such as <TimeSpan> and <TimeStamp> into the plugin. (See example)
  • (Issue 47) Gray buildings: You can now add the gray buildings layer to the plugin with the LAYER_BUILDINGS_LOW_RESOLUTION layer. (See example)

Along with these major new features, we've implemented the following feature requests from the public issue tracker: 10, 27, 42, 49, 99 and fixed these publicly reported defects: 75, 118, 131, 148. Check the Earth API release notes for more details.

The full list of a new samples for this release can be found at the Earth API demo gallery.

On our agenda for the not-too-distant future is:

  • Getting the other new Google Earth 5.0 features into the plugin
  • More complete API support for KML tours
  • Native API interfaces for time primitives

Lastly, if you're yearning for more Earth API goodness, make sure to catch my Google Earth API session at Google I/O on May 27th and 28th. Discounted early bird registration ends May 1st, so register now before time runs out!.

New Open-Source Tabs, Markers, and Controls Libraries

Sunday, March 29, 2009

The JavaScript API utility library has been growing fast in the last 3 months, with nearly double the number of libraries now being worked on in the development project. We can always use more libraries or help prepping the current libraries for release (code reviews, documentation, examples) - if you're interested, email the group to introduce yourself and let us know how you'd like to help. In the meantime, check out the most recent releases:


TabbedMaxContent 1.0: This library provides a max info window UI that's similar to the info window UI for local business results on Google Maps, and works in conjunction with the API's maxContent option. This comes courtesy of Nianwei, a developer who's also working on two upcoming libraries for a lightweight keyboard-triggered drag-to-zoom and an ArcGIS connection layer. Check out the examples or reference.
PopUpMarker 1.0: This library displays a "popup" (mini infowindow) to the side of a marker. The popup can either embed HTML, or it can use the Google Charts API to show text and icons in custom color schemes. This comes courtesy of Masashi, a Maps API expert from Japan with a plethora of tutorials and examples (all in Japanese, of course). Check out the examples or reference.
ExtLargeMapControl 1.1: This library creates a control that mimics the functionality and UI of GLargeMapControl3D, the current control on Google Maps, without the Street View integration. Developers can easily re-skin this control to match their own site, and use it in combination with a re-skinned ExtMapTypeControl for a full custom navigational UI. This also comes courtesy of Masashi, with help from Bjorn, author of SnapToRoute and ProgressBarControl. Check out the examples or reference.

Changes to the GoogleBar

Sunday, March 15, 2009

As many of you already know, developers can use the GoogleBar control in the Maps API to allow users to search the map for local businesses, landmarks and points of interest. As part of Google's ongoing commitment to improve user and developer experience, we have some changes coming up for the humble GoogleBar. Most importantly, we are adding advertising targeted to the user's searches. We hope that this, as with all Google advertising, will improve the user experience by providing targeted and relevant sponsored results. You will benefit from this as well, as you can make money from these Google ads provided on Maps API sites (see below).

In addition, there are a number of smaller changes: The JavaScript underlying the GoogleBar has been completely rewritten and the UI has been updated to make it more accessible and easy to use. In its collapsed state, the original GoogleBar control was often missed as a functioning search bar, so we aimed to design a new GoogleBar that was as recognizable as the traditional, elegant Google search field (logo + field + button), while occupying minimal space on the map. You can see the new GoogleBar, together with ads, below:


As you can see, in addition to the ad, there have been several cosmetic improvements. For example, we've removed the magnifying glass so the control is open all the time. As a result, we are deprecating the showOnLoad argument within the GoogleBarOptions object. All other arguments continue to be supported. This is a substantial change to the experience, look and feel of the GoogleBar, so we are giving you the opportunity to try the new version and give us some feedback before it becomes the default setting. Starting today you can try out the new GoogleBar by passing the parameter style='new' as part of GoogleBarOptions, as long as you are using the latest version of the API.

For example:

var opts = {
 googleBarOptions : {
   style : 'new'
 }
}
map = new GMap2(document.getElementById("map"), opts);
map.setCenter(new GLatLng(33.956461,-118.396225), 13);
map.enableGoogleBar();

Full documentation of the GoogleBar's new features is available in the API documentation.

This new version of the GoogleBar will contain advertising, as shown above. If you want to profit from the advertising personally, then all you have to do is get a Google AdSense for Search (AFS) id and pass it into the GoogleBar constructor. If you don't yet have a Google AdSense account, sign up for an account. Once you have done so (or if you already have an account) make sure you've also enabled the account with AdSense for Search. Once you have an AdSense for Search account, you will receive an AFS client ID. Specify this client ID, as shown below, and you will begin receiving advertising revenue for any clicks on sponsored results within your API application.

var opts = {
 googleBarOptions : {
   style : 'new',
   adsOptions : {
     client : ####  // Your Google AdSense for Search (AFS) client id
   }
 }
}
map = new GMap2(document.getElementById("map"), opts);
map.setCenter(new GLatLng(33.956461,-118.396225), 13);
map.enableGoogleBar();

Optionally, you may also specify an AdSense for Search channel if you've set that up. More information on advertising channels is located in the AdSense Help Center. Additionally, you may also specify the Ad Safety Level to associate with your advertising and the language in which to display results. Please consult the Maps API Reference for specifics.

You can give us feedback by going to the Maps API Google Group. A month or so from today we are planning to change the default style of the GoogleBar to be the new and improved version, so stay tuned for further announcements.

Good, beta, best

Wednesday, March 11, 2009

With the recent announcement of Google Code Labs, we wanted to update you on what's happening with the Maps and Earth APIs. We're excited to tell you that none of the Maps APIs (JavaScript, Flash, Static, Mapplets) or the Earth API are in labs. Furthermore, we've taken the opportunity to remove the 'beta' label from the Maps and Earth APIs. The original Maps API has been around for more than three years. Thanks to the hard work of dozens of people, the APIs have been very stable and become mature products that are used by sites and applications of all sizes. Our stability and commitment to supporting the APIs shouldn't be a big surprise for most of you, but now you've got it in writing too. :)

While the overall APIs are not in labs, there is one recent feature that is still experimental: AIR support in the Maps API for Flash. From time to time, as we release new features that are more of an experimental nature, we may let them bake in labs for some time. As with Google Labs and Google Code Labs, we'd like to get early feedback and see how you use these experimental features before making a long term commitment to them.

As always, please continue sending your feedback in the appropriate forum:

We've also set up "notify" groups that you can sign up for if you just want to see the important updates, e.g. new releases. You can sign up from the home page of each API or use the links below:

Monkey see, monkey do

Tuesday, February 24, 2009

Ever wanted to be someone else? No, we're not offering a Being John Malkovich service, but we are offering Maps API developers the default look-and-feel of maps.google.com, all with one simple function call.

Now, you can get the standard UI elements you'd see on Google Maps (including the newer style "3D" map and zoom controls), along with other standard behaviour such as keyboard and mouse handling, just by adding one line of code.

  // Create a map.
  var map = new GMap2(myMapDiv);
  // Give it the maps.google.com experience.
  map.setUIToDefault();

What's more, this function will ensure that if the UI of maps.google.com changes, these changes will also be reflected in your site without you having to update anything.

The function will automatically adjust what controls the map gets based on the size of the map. For maps larger than 300 x 400, the default controls are:

  • GLargeMapControl3D
  • GMapTypeControl
  • GScaleControl

For maps 300 x 400 or smaller, the default controls are:

  • GSmallZoomControl3D
  • GMenuMapTypeControl

Both will also enable scroll wheel zoom, double click zoom and add a GKeyboardHandler to the map.

You can also tweak the appearance to your liking. If you mostly want the standard behaviour, but, for example, don't want scroll wheel zoom enabled, you can get an instance of the default GMapUIOptions object, and adjust the fields to your liking.

  // Get the default GMapUIOptions.
  var uiOptions = map.getDefaultUI();
  // Disable scroll wheel zoom.
  uiOptions.zoom.scrollwheel = false;
  // Now set the map's UI with the tweaked options.
  map.setUI(uiOptions);

Along with this change, you can now also get direct access to the new 3D controls used on maps.google.com:

  • GLargeMapControl3D, and
  • GSmallZoomControl3D

A full reference of the functions, the GMapUIOptions class and all the defaults are available on the Google Maps API Reference. As always, head over to the forum if you have any questions.

Sorry that puppeteering of John M is not included, but at least now your site can easily look and act like Google Maps!

One more thing: if you want to meet the Maps API team and hear about other exciting things we're working on, come to Google I/O in May.