Author Archive

Pamela Fox wrote a wonderful tutorial in November called Creating a User-Contributed Map with PHP and Google Spreadsheets. However if you are like me, the thought of having to tackle server-side scripting sends you running for the hills. Fortunately, the recent release of forms for Google Spreadsheets means it is now possible (with just a tiny bit of hacking and wizardry) to create a user contributed map without any server-side scripting and with the added bonus of Google hosting the data for you.

1. The first step is to create a form for Google Spreadsheets at this page.

   The information that we need in order to add a contributor to our map is their name, latitude, and longitude. Of course, if you want more information on your map, you can always add more fields to the form later.

   • The first question we will ask is ‘What is your name?’. Type this into the ‘Question Title’ box. The default question type is ‘text’ - leave this as it is. After you have completed the ‘Question Title’ press ‘save’.
   • Now add the second question by clicking ‘+ Add a question’ and this time type ‘Latitude’ in the Question Title box. Again leave the question type as 'text' and press ‘save’ again.
   • Add one more question with ‘Longitude’ as the ‘Question Title’.

2. The second step (and the only one that requires some coding) is to hack the generated spreadsheet form so that instead of having to type in a latitude and longitude manually, our users can just click on a map to show where they live. To do this, we create a map and then assign an event listener for the map 'click' event that writes the values of the clicked coordinate into the form input fields. The code that accomplishes that is shown below:

   var map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   
   GEvent.addListener(map, 'click', function(overlay, latlng) {
     var LatLngStr = "Lat = " + latlng.lat() + ", Long = " + latlng.lng();
     map.openInfoWindow(latlng, LatLngStr);
     document.getElementById("latbox").value = latlng.lat();
     document.getElementById("lonbox").value = latlng.lng();
   });
   

   The full HTML for the form and map is here. This page extracts the latitude and longitude when a user clicks on the map and automatically fills in the input boxes for latitude and longitude in the spreadsheet form, and also lets the user fill in their name. The important things to remember about modifying the generated spreadsheet form is that the form field names remain the same (e.g. the name for the latitude input is 'single:2'), and that the form action remains the same (e.g. 'http://spreadsheets.google.com/formResponse?key=pHxwMuyQhRdSwN9QcKaqWVA').

   Now that you understand how the simple map-based form works, feel free to hack it further. Here's an example using the same form that integrates the GClientGeocoder to let users type in an address and then stores the resulting coordinate in hidden input fields.

3. Once you've successfully modified the form, all you need to do is use the Spreadsheet Map wizard to create your user-contributed map.

   The wizard will do all the work of creating your map and generating the code, and give you something like the map embedded below. You could also try out generating KML from the spreadsheet with the techniques from the Spreadsheets Mapper tool.

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.

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.

Due to the usage of non-latin characters in languages like Russian, and our decision to label countries and cities in their native tongue, I've always found browsing foreign countries in Google Maps to be quite the educational experience. How else would I have discovered that other languages have such pretty swirly letters? Unfortunately, it's also quite a frustrating experience when you're actually trying to find some place in those countries ("Tokyo! SHOW ME TOKYO!! aRrrgghghH!"). Well, thankfully the Google Maps team has now made it easier to have both an educational and satisfying experience with the recent introduction of transliterated tiles for Russia, Greece, Japan, and Thailand.

For users with a browser setting for the native languages of those countries, they'll continue seeing the tiles with just the labels in that language. But for everyone else, they'll see tiles with both the labels in the native character set and in the latin character set below it. You can trust the language setting to get that effect in the Maps API, or if you'd like, you can force a particular output in both the Javascript and Static Maps API by appending the"hl" parameter to the script src or image src with the desired language value. Experiment with the various language/country combinations in the example below to see this in action in both the Static and Javascript APIs:

Hi everyone, my name is Dan Rummel and I've been hacking Google Maps out of the San Francisco area for a couple years now. Recently I have been working hard on a start-up with a couple of college buddies: Seero.com (Putting live video on the map). In our UI, we want people to interact and explore using maps as much as possible, something we like to call GeoSurfing. However, sometimes after dragging and zooming a few times, one can quickly get lost in the middle of nowhere and unable to get back to the original viewport. So at the Google Javascript Hackathon, I started working on MarkerTracker, which is kind of like radar for 'important' markers. It's a simple and customizable tool that utilizes GPolyline to display directional indicators for markers that are out of view. Check out this simple example:

And to prove that the MarkerTracker can be used for something more advanced -- and to wish everyone a happy St. Patrick's Day -- here's a leprechaun chasing game:

A big thanks to Pamela Fox and all the developers who have contributed to the Google Maps Open Source utility library, it is a fantastic resource. Of course if you want to learn more about MarkerTracker check out the class reference and more examples. As always, please report any issues you find in the developer forum.

In the talk I gave last fall about Maps Mashups Usability, I mentioned that one way to make your map more informative at first glance is to use the color and size of a marker to indicate categorical or density information. Previously, that would mean using an image editing program or server-side image generation script to create all the various marker icons needed. Now, with the introduction of MapIconMaker v1.0 into the open-source utility library, all that's needed is a Javascript include and a bit of code. For example, the simple demo shows how the following line of code creates a GIcon that's 64 by 64 pixels and has a green fill.

var newIcon = MapIconMaker.createMarkerIcon({width: 64, height: 64, primaryColor: "#00ff00"});

Behind the scenes, that line of code constructs the URLs for the various GIcon properties by using a special output of the Chart API to generate marker icon images. But don't worry about that - just use our nifty MarkerIconOptions wizard to preview various settings, and then copy the generated code into your own mashup.

We loved the dynamic icons so much that we couldn't wait to start using them - so some of you might have already seen them in use for Google's Decision 2008 mapplet/map (screenshot below). At the zoomed out view, the map contains dynamically sized and colored markers for each state. The color represents the candidate that got the most votes, and the size represents the relative number of votes that candidate received. When you zoom into the state, the map then contains markers for each voting precinct representing the same data. It's a great way to quickly understand the population density and voting habits of a region.

We hope you enjoy MapIconMaker as much as we do. Please look through the reference and examples, and let us know if you have any questions in the forum.

In the talk I gave last fall about Maps Mashups Usability, I mentioned that one way to make your map more informative at first glance is to use the color and size of a marker to indicate categorical or density information. Previously, that would mean using an image editing program or server-side image generation script to create all the various marker icons needed. Now, with the introduction of MapIconMaker v1.0 into the open-source utility library, all that's needed is a Javascript include and a bit of code. For example, the simple demo shows how the following line of code creates a GIcon that's 64 by 64 pixels and has a green fill.

var newIcon = MapIconMaker.createMarkerIcon({width: 64, height: 64, primaryColor: "#00ff00"});

Behind the scenes, that line of code constructs the URLs for the various GIcon properties by using a special output of the Chart API to generate marker icon images. But don't worry about that - just use our nifty MarkerIconOptions wizard to preview various settings, and then copy the generated code into your own mashup.

We loved the dynamic icons so much that we couldn't wait to start using them - so some of you might have already seen them in use for Google's Decision 2008 mapplet/map (screenshot below). At the zoomed out view, the map contains dynamically sized and colored markers for each state. The color represents the candidate that got the most votes, and the size represents the relative number of votes that candidate received. When you zoom into the state, the map then contains markers for each voting precinct representing the same data. It's a great way to quickly understand the population density and voting habits of a region.

We hope you enjoy MapIconMaker as much as we do. Please look through the reference and examples, and let us know if you have any questions in the forum.

For the past three months I have had the great pleasure of working as an intern with the Google Maps API team in Sydney. Unfortunately my time is now up and I must head back to the mundane life of a undergraduate scholar, but before I do I'm ecstatic to announce that my intern project is FINALLY complete: Street View is now in the Google Maps API!

Many of you will already have seen Street View as part of maps.google.com. If you haven't, click this link to give it a go. Street View allows users to view 3D panoramas of various locations around the world and to navigate around neighborhoods as if they were (almost) really there.

We've worked hard to ensure that Street View in the API gives developers the power and control they need to embed this functionality in their own websites in whatever way they wish. The API allows you to embed one or multiple panoramas in any location on a site and move, remove, hide and unhide them as necessary. Panoramas can also be easily integrated with the rest of the Google Maps API to allow synchronization between the map and the panorama viewer. The blue tile layer overlays which show where Street View data is available can be added to your own maps using the GStreetviewOverlay class. The following example mimics the Google Maps functionality with the tile layer and rotating Street View icon:

By far the coolest feature (in my opinion) is the ability to control the embedded viewer using Javascript functions on the GStreetviewPanorama object. The panTo function changes the current point of view by performing a smooth animation between the current and target view. An example of this is the app below which does a 360 degree pan around the current location (for all you people too lazy to use your mouse):

There's a whole lot more functionality available in the API than I could ever cover in one blog post, so check out the documentation, reference, demos, and start experimenting! Once you're done, post a link to your experiment in the forum. We'll check them out, post the most fun and practical demos in a blog post and our demo gallery, and send the authors some nifty Google schwag.

Before I sign off, I'd like to thank the entire Google Maps team for their help in getting this project complete. I had a fantastic time interning with Google and learnt a phenomenal amount.

Two months ago, we announced the start of the Google Geo Developer series on this blog. The point of the series was to bring together local geo developers for intimate talks/discussions around Maps/KML topics, and then let all developers watch the events on YouTube. It was a bit of an experiment - would we find enough topics for talks every week? Would anyone watch the videos? Well, I'm happy to say it was a successful experiment. Besides having 6 great talks and more than 20,000 YouTube video views, we also met a bunch of local developers working on geo projects (thanks for always showing up, you guys), and even met some folks from far away through the mailing list. Hopefully we'll get to hold another of these series in the falls, so subscribe to the mailing list if you want to find out about future events.

Here's a roundup of the talks that went down, with links to videos. Click "More info" on the YouTube description and you'll often find a link to slides/materials.

• Quick & Dirty KML Creation: With Mano Marks, Pamela Fox, and Christiaan Adams
  A demonstration of creating KML visually in Google Earth & Google Maps, and using Spreadsheet Mapper 2.0
• Creating Custom Maps: With John Coryat
  A comparison of various ways of overlaying data in the Maps API and an in-depth explanation of creating tile layers and custom map types
• GigaPan In-Depth: With Randy Sargent & Ted Morse
  A demo of the GigaPan panorama-browsing website and KML files, plus a technical explanation of PhotoOverlay
• Dynamic KML: With Mano Marks & Brian Hamlin
  An exploration of using dynamic queries from KML, using the NetworkLink, httpQuery, and viewFormat elements, plus a demo of a PostGIS-generated NetworkLink
• Mars, Moon, and Sky Map Types: With Noel Gorelick
  A talk introducing the non-Earth Maps API map types, plus cool demos of other types of projections used with planetary imagery
• Mapping the Votes: With Michael Geary
  A whirlwind tour of what it took to create the Elections 2008 Map/Mapplet/Gadget, including SHPfile conversion, Javascript optimization, centroid calculations, Twitter updates collection, Mapplet API tricks, and more.
• Google API Talks - Android, KML, Google Maps, Gadgets
  A series of 5-minute talks by various developers and Googlers given before Geary's presentation, including an intro to Gadgets/Mapplets.

Several weeks ago, we announced the official release of Street View in the Maps API and invited developers to post examples of their Street View mashups. We crossed our fingers and hoped that we'd made the classes flexible and functional enough for developers to work with, and soon enough the examples started flowing in.

Here are some of my favorites:

	DualMaps: For a given location, displays the Street View, Birds Eye View, and Google aerial map view simultaneously and lets you embed or share the result
	Povo: A local reviews site specially for Boston. Displays street view in a lightbox for each location, and has made a Street View tour especially for the recent Boston Marathon.
	StreetView Adventure Game: In the spirit of the classic interactive fiction games like Zork, this demo lets you play a short game that begins with chasing a guy trying to climb out a window in San Francisco.

Also check out VegasVision, Ong Map V2 (Alpha), VPike, FlyRig, Street View Gadget, LotView, Street View SF Tour, RealBird, Glotter and a Street View Tour Gadget. And if you loved Trulia's implementation (announced on Google LatLong last week), check out this demo that shows how to angle a street view panorama towards the side of the street that a building is on. (It involves math, but don't worry, we've done it for you.)

Thanks to all you developers for sharing your work with us, and as always, please post your examples or questions in the forum.