Google Maps Without the Scripting

Posted by Tom Manshreck, Maps API Team

If you're a regular reader of this blog, you probably already use the Google Maps API and love it as much as we do! But you may find it not useful for certain cases: the Google Maps API requires JavaScript, can take a while to load over slow connections, and requires some overhead to maintain a dynamic website.

The Google Static Maps API provides a simpler way to add maps to your website. Rather than use JavaScript, the Google Static Maps API creates map images on the fly via simple requests to the Static Maps service with HTTP requests. No JavaScript, no overhead. Just create a special URL as the src attribute within an tag and let the Static Maps service create your image.

To see how easy the Static Maps API is to use, note the image below:

This image was created using the following simple tag:

(Note that you will need to replace the key parameter above with your own Maps API key. You can obtain a free key at http://code.google.com/apis/maps/signup.html)

When this blog post was displayed in your browser, the URL in the tag was sent to the Static Maps service, which constructed an image based on the parameters passed in that URL. Voila! You can create maps up to 512 x 512 pixels, and at any zoom level or location on the face of the earth that Google Maps supports. You can even place markers on your map images! This Static Maps Wizard lets you play around with some of the options.

The Static Maps API is especially useful for pages in which you want a map to load quickly. You can even replace the generated Static Map with a JavaScript Maps API map after the page loads, allowing a seamless transition from a quick-loading map to a fully dynamic implementation.

Because the map generated by the Static Maps API is an image, you can also send it to your friends as an email attachment (especially handy for planning your next party!) or display it on any cell phone browser, whether or not it supports JavaScript.

Full documentation on constructing maps with the Static Maps API is available at:

http://code.google.com/apis/maps/documentation/staticmaps/index.html

As always, please post questions in the Maps API forum.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

Introducing the Maps API Demo Gallery

Posted by Pamela Fox, Google Maps API Team

Why re-invent the wheel when you can copy and paste our wheel instead?

In the Google Maps API group and in my Inbox, developers often ask me questions such as "How do I draw a circle on the map?" or "How do I create groups of toggle-able markers?" Most of those questions are answered in the usage of little demo applications that I or one of our great external developers have put together. Previously, you have had to hunt through multiple places -- blog posts, developer sites, and group posts -- to find links to those demos. Well, start saving your hunting skills for the inevitable apocalypse. Our new Maps API Demo Gallery aggregates these demos togther, displaying a gallery of 40+ mini-applications with thumbnails, descriptions, and easy-to-read source code. Check out a standalone embedded version of this gallery below, and contact me if you'd like some of your own demos included in it.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

Orbitz Mobile Traffic Maps: A Static Maps Story

Posted by Joe Monahan, Maps API Developer

It is my pleasure to be asked by Pamela to write another guest blog post; this time to discuss my experiences in using the new Static Maps API to enhance our Orbitz TLC Traveler Update mobile airport traffic page. I am pleased to report that although the API is in its early stages, it provides enough functionality to easily convey valuable geo-based information (e.g. the top 10 severe traffic incidents surrounding an airport) for our mobile users.

So why are static maps so important to mobile? Well, mobile development is kind of the old Wild West of the internet. Different phones use different browsers: some are common browsers like Opera, while others are proprietary ones written by the device manufacturer. This means you cannot count on universal support for Javascript and Ajax, and therefore there is no way to use the Google Maps Javascript API for people on cell phones and PDAs.

Ok, enough of the history lesson, click on the screenshot below to take a look at the Static Maps API in action.

Originally when starting work on this feature, I of course wanted to use things like clickable markers, custom icons, and so on. But the thing to remember about mobile users is that they are on the go and have limited time to look at your map. Therefore it is best to keep the information as simple and bare bones as possible, as to limit the amount of time needed to interpret what they are seeing.

Instead of custom icons, we used colors to contrast traffic markers from the central airport marker. We found the blue icon drew enough attention that it was the central focal, when surrounded by red icons (our traffic incidents). Additionally, the red color was enough to associate markers on our mobile version of severe traffic incidents with those found on our web site that uses a custom red triangle icon. Also by using labeled markers for the traffic incidents, and no label for the airport, we were able to further create a simple interpretation of traffic markers versus the airport maker. Finally, since most users are used to the alphabet markers signifying a list of similar points on things like maps.google.com, it was enough to help us associate the list of traffic incidents on the map with their specific traffic details located below the map.

There were only two big concerns we found when creating this mobile map: icon size and lack of numbered icons. Since most mobile devices are phone-based, screen size (and thus map size) tends to be limited. As you can see in the example above, there are several times where the icons overlap and make the map look cluttered. If a smaller version of the icons were available, it could reduce the number of overlapping markers and make clear the position of the traffic incidents. Another issue with the icons is that the use of alphabet letters as labels has an inherent limitation, in that you can only place 26 different icons on one map. Because our non-mobile version of the traffic page can list over a hundred distinct incidents, we use numbers there to label those icons. If numbered icons were available for static maps, we could display additional traffic incidents on the mobile map.

As always, the Google Maps API team and I welcome comments and questions on this article, the mobile feature mentioned, and the Static Maps API. Please leave feedback in the Maps API forum.

Disclaimer: These views are mine and not the views of OWW or (subsidiary). I am not a spokesperson for OWW or (subsidiary) and neither OWW nor (subsidiary) endorse any material, content and/or links or assume any liability for any of my actions.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

Static Maps Have Never Looked This Good!

Posted by Pamela Fox, Maps API Team

Do you ever find yourself using our Static Maps API, wishing you could cover your maps with markers of all sorts of colors, sizes, and letters, or that you could draw lines all over the map? Well, today is your lucky day. Check out these new features in the Static Maps API (and the kind of output you can get from it!) below:

• More marker options: You can now specify 4 different sizes (from normal to tiny), and 8 different colors (and for half of the sizes, you can specify a letter as well).
  


• Paths: You can specify a path of up to 50 points, along with color, weight, and alpha.
  


• Image formats: You can specify PNG, JPG, or GIF output.
  


• Transliterated tiles: You can explicitly specify a language, if you'd like transliterated tiles (for Greece or Japan, for example).
  

Feel free to play around with the options in the updated Static Map Wizard or read through the documentation. As usual, please post questions or comments in the forum. We'd love to see how developers are using this API and its newest features.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

Introducing the Google Maps API for Flash

Posted by Mike Jones, Maps API Team

Here at Google, we receive a lot of feature requests - and it feels great every time we fulfill one of them. The ability to utilize the power of Google Maps from Flash is one of those requests that has been popping up on blog posts and other forums since the beginning of time (or more accurately, the beginning of the Javascript Maps API). Over the past few hours, I've had the enjoyment of finally seeing this particular feature request - a Maps API for Flash - come to fruition. Tiredness will grab me soon, no doubt. If you're one of the first readers of this post, rest assured that I'm unlikely to still be awake: long hours have been worked; pre-launch nerves have jangled. Now it's time to let our baby loose into the world and see how the developer community will embrace it.

So, what do I like about the API for Flash? Smoothness and speed are a big part of it. We've designed it so that Flash graphics can be used for each tile layer, marker and info window - opening up possibilities like dynamic shading, shadowing, animation, and video. When the user zooms the map, magnification changes happen smoothly and place names fade in. After the user drags a marker, it gently bounces to a halt. Generally, Flash allows for much greater embellishment, and, well... "flashiness." I get excited just thinking about the creative ways developers might take advantage of having a Flash API for Google Maps.

What was one of our main design decisions for this project? We knew that version 1 of any software project is not perfect, so we opted to split the interface and implementation. As a result, you can build against the current version of the API, and as we add enhancements and tweaks, your website benefits automatically from each update. When you wish to take advantage of new API functions, only then do you need to download the latest API and rebuild.

What does it look like? We've played with it, thrown our ideas in, and also worked with outside companies to see how they use the API. It's been a pleasure to see some of the demos that have come back. Here's one from AFComponents that shows some of the possibilities:

When I first joined Google in Sydney, I got to hear about the experience of the Maps team when they first watched the traffic and the buzz build for the launch of Google Maps. Well, now I'm ready to experience that with this new API. Do send us feedback, we're looking forward to it.

What remains? Over to you.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

Love My Maps? Use its Line and Shape Editing in your API Apps!

Posted by Keith Golden, My Maps team

When we launched the map editing tools in Google Maps, the reaction of developers was "This is cool, but how can I use it on my own site?" As someone who was originally drawn to Google in part because of the Maps API and the great developer community around it, I committed to making the My Maps tools useful for developers on their own sites.

Today, I'm pleased to announce that our user interface functionality for editable polylines and polygons is now part of the Maps API.

Say, for example, that you have a GPolygon you want users to be able to edit. Simply call GPolygon.enableEditing() and the poly will have draggable edit control vertices when the user mouses over it. To later make it non-editable, call GPolygon.disableEditing().

We've also exposed additional events for GPolygon and GPolyline so that you can easily mimic the MyMaps behavior (in mashups or Mapplets) by calling enableEditing on "mouseover" and disableEditing on "mouseout". To find out when the user makes an edit, listen for the "lineupdated" event. And if you want users to be able to draw a new GPolyline completely from scratch, just use enableDrawing as shown below:

var polyline = new GPolyline([]);
map.addOverlay(polyline);
polyline.enableDrawing();

Every click on the map will add a new vertex to the polyline until the user double-clicks or clicks again on the last vertex. You can also call enableDrawing to lets users append vertices to either end of an existing polyline. And just because everyone likes pretty colors, we exposed methods to let you change the style of a polyline or polygon: setStrokeStyle and setFillStyle. Have fun, and let us know what you think in the forum.

View example in its own window.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

App Engine, Local Search, & Maps: Making Static Maps... Interactive?

Posted by Ben Lisbakken, AJAX APIs Team

JavaScript and Flash are great for putting Google Maps on your website, but sometimes they just won't do. For mobile browsers or users with dial-up connections, simpler is better. So I wrote an open source non-JavaScript version of Google Maps which is designed to show how easy it is to write an application on App Engine that makes use of two new APIs from Google: The Static Maps API and the Local Search API's REST interface. It doesn't have advanced features like street view and public transportation, but it gives you a searchable map that you can zoom in/out on as well as save locations. It also automatically saves your last map view so that every time you go back to the site it will show you what you were last looking at. Check out the source code.

It uses App Engine to store saved points, the AJAX LocalSearch REST API for search functionality, and the Static Maps API to display maps. App Engine is easy to learn and the data store is useful for this kind of application. The REST API for LocalSearch is also very simple. For more information on it, go here.

To use the Static Maps API, you just need to create a URL with the proper parameters for your desired map view. Keep in mind that you need to set the zoom level (unless you are specifying multiple points — then it's calculated for you). In the vast majority of cases, this is completely fine. In my case, though, I needed to know what the zoom level was, so that I could give the user the option to zoom in/out. That meant coming up with calculations of the zoom both for the multiple points and single point case, and that was the trickiest part of the app.

If you use the AJAX Local Search and it returns one result then there will be a viewport object returned with it. This viewport contains the Northeast and Southwest latitude/longitude bounds that are optimal for displaying this point. However, Static Maps only accept zoom levels and center points. Here's the Python to generate that information:

viewport = json['responseData']['viewport']
mercator_projection = MercatorProjection(18) # Checkout the MercatorProjection class
southwest = [float(viewport['sw']['lat']),float(viewport['sw']['lng'])]
northeast = [float(viewport['ne']['lat']),float(viewport['ne']['lng'])]
bounds = [southwest, northeast]
zoom_level = mercator_projection.CalculateBoundsZoomLevel(bounds, MAP_SIZE)

At this point you will have everything you need to construct the map: the center point (the Local Search point), zoom level, marker point.

Then there's the case where you have multiple points returned by the AJAX Local Search. Since we will have a collection of latitudes and longitude points that we want to display we can just find the min/maxes, do some rounding, and voilà you get a bounding box. With a bounding box and a calculated center point, you can repeat the same steps as before.

mercator_projection = MercatorProjection(18)
bounds = CalcBoundsFromPoints(lats, lngs)
center_point = CalcCenterFromBounds(bounds)
zoom_level = mercator_projection.CalculateBoundsZoomLevel(bounds, MAP_SIZE)

From line 121 to about 285 you'll find all the necessary functions for the situations described above. Try using this code to create your own interactive version of Static Maps, and let us know in the forum if you have questions or just want to show off your nifty app.

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!

See your location history dashboard and more with Google Maps 5.3 for Android

Today, we’re happy to announce Google Maps 5.3 for Android, which lets you see your Google Location History dashboard, check in at “home,” and add your own aspects for places when rating them.

Location History dashboard
If you’ve enabled Location History for Google Latitude, you’ve been able to visualize interesting trends in your location history with a personal dashboard at google.com/latitude on your computer. Now, you can also see your dashboard on your phone by tapping View location history from your Latitude profile. You’ll be able to see right on your phone how far you’ve travelled as well as an estimate of how much time you’ve spent at home, at work, or out.

If you haven’t yet, you can enable Location History from your computer or from Latitude’s Settings menu on your phone. Location History is 100% opt-in and is private to you and nobody else. You can always delete any of your location history from the Manage History tab or correct the estimated work and home locations from the dashboard on your computer.

View your location history dashboard from your Latitude profile on your phone and see estimates of where you’ve spent your time.

Check in at home
Now that you can see how much time you spend at “home”, you might want to let friends know when you’re there. Checking in at places using Latitude is another way to keep a history of places you’ve been and also lets you share when you’re there. I love letting friends and family know when I’m at a cafe or park, but sometimes I want them to know that I’m relaxing at home or made it back safely from a road trip. So now, I can start checking in at “home” in Latitude:

1. Check in from Latitude and tap “Home - Tap to set your location” at the bottom of the nearby places list if you don’t have one yet.
2. Use the estimated current address or enter in your home address yourself.
3. Once you’ve checked in at home once, “Home” will appear at the top of the list when you’re checking in near there.

Like Latitude and other check-ins, checking in at home is entirely opt-in. Your set “home” location is not searchable and only you can check in there. Just like any other check-in, you can choose with whom to share your home check-ins (along with your name and address info).

Add your own aspects for places
When you’re rating places on the go in Maps using Google Places with Hotpot, you could always quickly leave feedback on a specific aspect or characteristic of a place, such as the food or ambiance. Before, we’d automatically include aspects about places that were commonly mentioned in reviews. Now, you can add your own aspects for each place. So if you think a place has a beautiful view or great music, you can add it yourself and quickly share it with the world.

When rating places, you can add your own aspects like “music” for places and leave quick feedback.

To get started, update Google Maps from Android Market on devices with Android OS 1.6+ anywhere Google Maps and Latitude are already available.

Posted by Kenneth Leftin, Software Engineer, Google Maps for mobile team

Generated by BlogIt

BlogIt - Auto Blogging Software for YOU!