A few weeks ago, we launched two layers on maps.google.com, accessible via the "More.." button. The photos layer displays Panoramio photos, continuously loading in more photos as you zoom in, and letting you click the photos to see the info window with more information. Behind the scenes, the implementation is basically a GTileLayerOverlay plus array of pixel bounds specifying the clickable areas. It's a clever technique that can be used whenever you have vast amounts of potentially clickable data, and a server that can render out tiles. However, I'm here today to show you how to create a similar effect using MarkerManager plus Panoramio's API.
GTileLayerOverlay
MarkerManager
The Panoramio API lets you specify a bounding box query, sort by popularity, and output its data in JSON format. The MarkerManager lets you specify marker batches per zoom level ranges, and only displays the markers for the current viewport. Using these features, we can then do the following:
http://www.panoramio.com/map/get_panoramas.php? order=popularity&set=public&from=0&to=10& minx=-124.29382324218749&miny=36.089060460282006& maxx=-119.8773193359375&maxy=38.724090458956965& callback=MyCallback
The effect to the user is that additional photos stream in and populate the map as they zoom in - check it out below or here. You can use this technique whenever you have a database that can be queried by bounding box and rank the results.
But if you want to just put a Panoramio button on your site, you can copy the code & scripts from this example. If you're a Panoramio user yourself, you can actually restrict the layer to only your photos by passing in your user ID to the API call. Developer Ade is experimenting with this on his ibizaA-Z site in order to just display his Ibiza photos.
On May 28th & 29th, several thousand developers descended upon the Moscone Center in San Francisco to participate in Google I/O, our largest developer event to date. Among those were hundreds of geo developers, and I felt fortunate to be able to meet folks in person that I assumed would just be GMail-buddies-for-life: Jesse Kocher from walkscore, Alex Neth from cribq.com, Andres Ferrate of Mapdango, Ken Hoetmer of lonely planet, Nianwei Liu of Charlotte Zoning Maps, Kevin MacDonald of Pentura, Jeffrey & Dave Martin of 360cities, and many more. Hopefully those of you who couldn't come out here for I/O will be joining us at one of our international Developer Days (¿alguien quiere celebrar en Mexico City conmigo?).
Until then, you can watch all the I/O presentations in full Youtube glory. The Maps API and KML presentations are in the player below, and the full list of the 70+ presentations (with some links to slides) is here. You can also check out our photo album from the event (I've never felt so dwarfed by a marker before), and the panoramas that Jeffrey took at the event (I've never met a chocolate fountain I didn't like :).
360cities.net is a virtual reality network with panoramas from all around the world. They bring us fantastic depictions of the world's beauty and human creativity.
They also happen to take advantage of almost every Geo API that we have! We were fortunate enough to have them at Google I/O last week, so we could sit with them and discuss how they do what they do.
To cut to the chase, you can watch the entire set of interviews and demos in one go, or you can jump around using the playlist custom viewer below. I happen to be a huge fan of their use of the new Flash API as they "flip things inside out":
We talked about a really varied set of topics. Not only did we discuss their usage of the APIs, but we got into how they manage to deal with these huge images, how they stitch them together, and how they even manage to get so many of them.
You will see the process, how their data center started in a closet in Boston, how Lurch from the Adams family is one of their photographers, and the importance of the BBC Model B.
Thanks so much to Jeffrey and David Martin for joining us. A real pleasure.
Hi! I'm Katsuomi Kobayashi, a developer from Osaka, Japan. I'm delighted to write as a guest on this blog.
2D Driving Simulator on Google Maps is a personal project of mine. With the power of Google Maps, you can drive around the world without having to worry about spending money on expensive gas. And it is using the brand-new Flash API which Google released two weeks ago.
My original 2D Driving Simulator is a Flash toy that simulates car parking and trailer movement. In my second release of the toy, I added in wide courses to make it a bit more fun (and less crash-prone). When I tried to add in more natural courses and realized how difficult it was, I decided to test out using the real roads of Google Maps as a backdrop.
At the time of that decision, the Google Maps API was only available in Javascript - so I actually had to find a way to overlay the Flash toy on top of a Javascript map and synchronize them. Amazingly, it actually somewhat worked. Unfortunately, it's 'success' relied on the troublesome wmode=transparent Flash parameter, and on having to call JavaScript from Flash 20 times a second (certainly not a typical thing to do).
So, the release of the Google Maps API for Flash was truly happy news for me. I implemented it right away. It was easy to replace the JS API; it only took a few hours. All I had to do was to add a com.google.maps.Map child on the main Sprite, copy the JavaScript functions to ActionScript, and adapt them according to the API's minor differences.
The result is very impressive: there is both an increased frame rate (from 15-20 fps to 40 fps) *and* a decreased CPU usage. Moreover, the map perfectly follows the vehicle's movement. Quite natural!
The Google Maps API for Flash has enabled us developers to create real-time Google Maps applications. I believe this excellent API has unlimited potential and look forward to using more of it in the future.
By now, many of you have heard about the new Google Earth API that we announced Wednesday during Google I/O. It's exciting that you can now enjoy the 3D Google Earth experience in the browser, and you can create your own custom interactive apps on top of it. This new API lets you use JavaScript to programmatically interact with the Earth browser, changing camera views, loading KML or 3D models, or even creating KML objects from scratch.
Here's your basic "Hello Earth" app:
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <head> <title>Hello Google Earth!</title> <!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** --> <script src="http://www.google.com/jsapi?key=abcd"></script> <script> google.load("earth", "1"); var ge = null; function init() { google.earth.createInstance("map3d", initCallback, failureCallback); } function initCallback(object) { ge = object; ge.getWindow().setVisibility(true); } function failureCallback(object) { // Gracefully handle failure. } </script> </head> <body onload='init()' id='body'> <center> <div> Hello, Earth! </div> <div id='map3d_container' style='border: 1px solid silver; height: 600px; width: 800px;'> <div id='map3d' style='height: 100%;'></div> </div> </center> </body> </html>
And, if you're already a Google Maps API developer, adding Google Earth to your mashup is really easy. Just add the following line:
map.addMapType(G_SATELLITE_3D_MAP);
To view apps written in the Earth API, you will have to download a browser plug-in. Currently, the plug-in is Windows only, and works on Mozilla and Internet Explorer based browsers, including Firefox. We are working to expand the number of browsers, and have announced Mac and Linux plug-ins will be released in August.
Check out the cool sample apps. If you have any questions or come across any problems, post them in our Earth API developer group.
Give us feedback in our Product Forums.
Follow