Posted:

There are two recently released additions to the articles section of the documentation, for two completely different audiences. Check them out below:


Using PHP/MySQL with the Google Maps API for Flash

Are you a developer accustomed to developing mySQL-driven websites with PHP? Do you want to learn how to use the Google Maps API for Flash with dynamically loaded data? This article goes through the steps of creating a mySQL table, populating the table with data, using PHP to generate XML from that mySQL table, and finally, writing the AS3 code to dynamically load in the PHP-generated XML and display a map with multiple markers and custom icons. After going through this tutorial, you should be ready to extend what you've learned to your own databases.

Click here to read!

Creating Custom Google Maps API Icons

Are you a Photoshop junkie who wants to create the perfect GIcon for your map mashup? Are you struggling to figure out the best settings for the shadow and print images? This screencast (Flash player required) goes through the process of creating icons, covering each of the GIcon properties in detail. You can also download all the sample files (PSD/JPG/PNG/GIF) used in the screencast. After going through this screencast, you should be ready to extend what you've learned to your own crazy unique icons (Hello Kitty, anyone?).

Click here to read!

The articles section now also includes links to a few external articles that we found really useful: Thematic Mapping with the Google Maps API for Flash, and Creating Custom Campus Maps using the Google Maps API. If you've written an article about the Google Maps API that you think would benefit developers reading our documentation, please let us know.

Posted:

One of the first concepts I explain to developers that are new to mapping APIs is geocoding: the process of converting an address into a latitude/longitude pair. Approximately 99.9% of developers will have to use a geocoder before they can get their data onto a map, and to let users of their map locate themselves. Thankfully, we offer both the HTTP Geocoding service for server-side geocoding (the former), and the GClientGeocoder class for client-side geocoding (the latter).

Now, let me introduce the more advanced topic of reverse geocoding: the process of converting a latitude/longitude pair into an address. A much smaller (but important) percentage of developers will want to use a reverse geocoder to let their map users know the address for a particular point on the map, perhaps to help them fill in a form faster (why type when you can click?!). For those developers, we're now pleased to offer address-level reverse geocoding support to both our HTTP service and the GClientGeocoder class. To make it super easy to use, the interface for reverse geocoding is nearly the same as forward geocoding - the only difference is sending in a lat/lng instead of an address. Here's a code snippet for doing client-side reverse geocoding, taken from this sample:

geocoder.getLocations(latlng, function(addresses) {
  if(addresses.Status.code != 200) {
    alert("reverse geocoder failed to find an address for " + latlng.toUrlValue());
  } else { 
    var result = addresses.Placemark[0];
    map.openInfoWindow(latlng, result.address);
  }
});

As a live demo of the reverse geocoder, check out MeetWays, a site that mashes up the Google AJAX Local Search API with the Google Maps API and just a bit of math. It calculates the point between two addresses on the map, uses the reverse geocoder to find out the address for that point, and then does a local search near that address to find places to meet that are halfway between. Since reverse geocoding works in all the places that forward geocoding works, then you should be able to meet up with your friends in more than 70 countries.

screenshot of Meetways

For more information on this new service, read through the reference and sample code. We'd love to see the ways that developers will use the reverse geocoder, so please post a link to your reverse geocoding demo or website in the forum. Now go forth and reversify!

Posted:

Howdy, everyone! I'm sure that after reading countless posts on the Geo Developers blog and writing tons of code using Google Geo APIs and other development kits, you're all experts with KML. I mean, you obviously know that to create a polygon, you simply need a <Placemark>, with a <Polygon> containing an <outerBoundaryIs> consisting of a <LinearRing> with a <coordinates> element which contains a series of (longitude, latitude, altitude) tuples... and, you didn't forget that you need to repeat your first coordinate tuple again at the end, right? Heh, well maybe not. For those of you can recite the entire OGC KML v2.2 schema from memory in one go, you can probably stop reading.

To the 99.9% of us who don't know everything there is to know about KML, and have been looking for a way to explore this curious little language, I present a new learning and exploration tool called the KML Interactive Sampler. One caveat, though -- since the sampler uses the Earth Browser Plug-in and API, the Earth view will currently only work on Windows.

Mac folks... be patient, a seriously awesome Mac version of the plugin is in the works!

Here are a few screenshots of the sampler to whet your appetite:

KML Interactive Sampler Screenshot 1 KML Interactive Sampler Screenshot 2 KML Interactive Sampler Screenshot 3

The sampler consists of a four important sections:
  1. The sample list on the left contains a variety of predefined KML samples, organized hierarchically by topic (i.e. 'Lines and Paths', 'Polygons', etc.) Clicking a sample in the list will load the KML contents into the editor and display the KML in the Earth preview window (see below).
  2. The instructions and useful links panel at the top contains instructions and other miscellaneous information about the currently loaded sample, as well as relevant links to the KML reference.
  3. The source editor is the highlight of the sampler. Here, you can make local changes to the sample code and see how the new code looks in the Earth preview by clicking the 'Update Earth' button. And, you can even start a new KML document from scratch once you're ready. The editor has built-in syntax highlighting, so you'll be visually warned if you have an incorrect end tag somewhere. Many thanks to the developer(s) of CodeMirror for the outstanding text editor component.
  4. And finally, the Earth preview, is an instance of the Google Earth Browser Plug-in that shows you the hard-earned results of your KML code.

So, if you're just starting out with KML, or brushing up on your existing skills or maybe just looking to play around with a cool new toy, definitely check out the new sampler. If you have any trouble using it, feel free to comment in the Getting Started with KML support forum.

Thanks, and enjoy!

Posted:

Just a reminder to everyone interested or engaged in science outreach with KML and/or Google Earth: if you haven't already, be sure to check out the Scientific Applications with Google Earth Conference, recently mentioned on Google's Lat Long Blog. Registration closes at the end of this week!

Posted:

Back when we announced the "Google Maps API for Flash" in May, there were a large amount of Flash CS3 developers who were miffed at our lack of support for using the API in their favorite program, and quickly made "Flash CS3 Support" the second most starred feature request -- and there was even one developer named Vincent who managed to get our SWC running in CS3 who quickly became a one-man support desk for his hack. Well, Vincent, it's time to take a vacation, and CS3 Developers, it's time to get to work. The 1.7 SWC can now officially be used as a Flash CS3 Component, and the documentation now includes a snazzy screenshot-filled tutorial about creating your first map in Flash CS3.

To show that off, I made the kind of demo that one can only truly be done in Flash - a Google-ified re-envisionment of a scene from my all-time favorite movie, Puff the Magic Dragon. Click the screenshot to check it out.

Warning: Watch this scene (5:20) first if you've never seen the movie, or you'll think I'm a bit crazy. I mean, you might think so anyway. But still.

Now — before Flex developers think that we've forgotten about them — I've got more news. The 1.7 SDK now includes a special SWC for Flex developers, and the documentation includes tutorials for creating your first Map with this SWC in both Flex SDK and Flex Builder. Using this SWC means that you can set up the map as a custom Flex component, and then use any Flex components on the map in controls, info windows, markers, etc (something that was previously not possible). To show that off, I made a demo that embeds a TabNavigator inside an info window to make tabbed info windows. Click the screenshot to check it out.

And there are a few extra features for everyone, like TileLayerOverlay, ScaleControl, Geodesic Polylines, Walking Directions. Check out the demo gallery for examples of those, and read the docs for more information. Enjoy 1.7, and let us know in the forum how you're using the API or if you have questions.

Posted:

Last Friday in the Madrid Google Office, a group of 22 outside developers, and 4 Googlers, met to discuss current projects, and to give feedback to Google about Google Geo APIs. There were too many presentations to list all of them here, but here are some highlights:
  • Developers from ipoki, Wolpy, and Wikiloc talked about the different ways they implement GPS track uploads and sharing of geo content.
  • Javier de la Torre presented about using heatmaps to display biodiversity data.
  • A developer from Paintmap presented about their site, which allows artists to sell paintings that are contextually placed by their their subject matter. They also use the Panoramio API to allow you to compare thumbnails of the paintings with photos taken at those locations.
  • A developer from Placechannel talked about his site's use of geolocated YouTube videos, and allowing users to make edits to the locations, stored only on their site.
  • Googlers presented about the improvements to Panoramio's performance, the new Spanish language Google Maps API Documentation, and the Earth API.
We got a lot of great suggestions for various APIs at Google, including all the Geo APIs, but also the YouTube API and SketchUp. We had so much fun that we went over by two hours, but no one seemed to mind. Gracias desarrolladores de España, es un gran día!

Posted:

Back in May, we released a feature in Google Maps that let users toggle on additional "layers" of information on top of the map, starting with Panoramio and Wikipedia options. Both of these layers display thousands of variably sized icons on top of the map, and open info windows with more information about the clicked icon. So the user might click a large "W" in New York to read a snippet from Wikipedia's article about the Empire State Building, or they might click on a thumbnail in Black Rock City to see a photo of a Burning Man Temple.

Now, for those of you who want to easily enable these layers on your map (or through a custom control), you can create a new Layer object with the specified layer ID, and then add that to the map as an overlay. Check out the sample code and demo below, and read through the docs for more info:

map.addOverlay(new GLayer("com.panoramio.all"));
map.addOverlay(new GLayer("org.wikipedia.en"));

Note: There are localized versions of the Wikipedia layers available in many languages. These will not be automatically served to users based on browser setting, so you should explicitly add those if your map is targeted at a local audience. See this spreadsheet for a full list of IDs.

For those of you developers wondering how these layers are able to display so many icons without slowing the browser down, here's some inside info for you. The layers are actually implemented as GTileLayerOverlays, where the tiles are just transparent PNGs with icons baked into them. The clickability of the layer is achieved by passing information about the clickable pixel bounds of each tile to the client, then doing a client-side check to figure out which bounds the cursor is inside on the map mousemove and click events, and changing the cursor or popping up the appropriate info window. If you're interested in implementing a similar solution for your own thousand-markered mashups, check out John Coryat's clickable tilelayer demo in the demo gallery, or the various presentations on creating custom maps.