Posted:

We've just added Polylines and Polygons to Maps API v3. These allow you to draw lines or filled regions on the map, specify stroke and fill styles, and handle events. They work in all supported browsers.

We've also made a few improvements from Polylines and Polygons in Maps API v2.

  1. You can send in multiple paths for one Polygon, and use that to render holes inside your poly, like in this Pentagon example.
  2. When you give us a set of vertices, we assign a level of detail to each vertex, showing only the necessary amount of vertices per zoom level. This is how we show complex routes in driving directions on Google Maps, and now you can benefit from that optimization with no extra work. Zoom in on the fractal snowflake poly example to see how it looks.

Adding a polyline or polygon to a map is easy, as shown in this snippet from the documentation:

 
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);

We wanted to launch early and get feedback, so there are still some features to come:

  • Support for the 'mouseover' event
  • Further rendering optimizations
  • Built-in editing like in Google My Maps

That said, here's a simple demo of polygon editing to show what you can do.


As always, please provide feedback in the Google Maps JS API v3 Group.


Posted:
KML is the most common data format for displaying geographic information, with over half a billion KML files on the web. However, much of the world's geographic information is also in other file types, particularly shapefiles, and image data. Fortunately, there's an open source utility library that helps developers work with all sort of Geographic file types, the Geospatial Data Abstraction Library. We've taken just two of the utilities in GDAL, and wrote articles about them.

Converting GIS Vector Data to KML: This tutorial walks you through the basics of converting GIS vector data to KML using the OGR open source library.

Creating super-overlays with gdal2tiles: This tutorial walks you through the basics of creating a super-overlay, a set of ground overlays that use region-based NetworkLinks, using the open source gdal2tiles utility.

And of course, if you want to learn more about these utilites or other Google Geo APIs, come to our San Francisco hackathon!

Posted:

Hi everyone, my name is Masashi Katsumata. I'm a Maps API expert in Japan. I love playing around with the Maps APIs, and I share everything I learn on my website for Japanese speaking developers. But don't worry, English speakers - I also like to create open-source extensions for the utility library, and share them with you here.

Today, I'm annoucing my newest contribution: SnapshotControl. This control makes it easy to generate an image "snapshot" of your interactive map, using the recently released Google Static Maps API v2.

The default behavior of the control is to add a button on the map, and that button pops up a snapshot when clicked. However, the control can be hidden and the generated snapshot URLs can be programmatically retrieved, so that the library may be used in a more flexible manner. Check out this demo to play with different options and see the generated URL.

This control also knows how to encode polylines, using the Douglas-Peucker algorithm, which means that it can be used on maps with very long paths. For example, the control can create static maps for driving direction routes, as shown in the this demo.

To learn more about this control, check out the reference and more examples. Enjoy!


Posted:
As a Googler, I spend most of my weekdays behind the keyboard and mouse, so I like to recharge on the weekends by getting outdoors to enjoy the best that Northern California has to offer.

Let me introduce myself: I'm Billy Rutledge, a manager, tech-lead and advocate for Google Developer Relations. As part of the "Our Favorites" blog series, I want to highlight a few web sites that have done a great job implementing the Google Maps APIs to help people like you and me spend more time under the sun.

WikiLoc

This site uses the JavaScript Maps API to let users upload and share GPS tracks. It embeds the Panoramio GLayer to let users see photos near their waypoints, and also displays an altitude chart for your track.

It also supports input/export of common GPS file formats. They offer a native mobile phone app that captures GPS points and uploads the data to the site for you.

Additionally, they let you create your own tracks by placing points on the map and rendering them as polylines.

GPSies - Tracks for Vagabonds

GPSies - Tracks for Vagabonds Another site for managing GPS tracks, which works great with free, native mobile applications for Android and iPhone devices.

The mobile apps are simple and easy to use, helping you monitor and save your tracks, and then upload them over the air to GPSies where they are visible in your tracks list.

The visualization is a robust JavaScript Maps API implementation that overlays a polyline across the GPS points. Nice additions include mile marker points (also in metric), integrated altitude charts that follow the polyline with mouse-move events, and integration of the DragZoomControl for easier zooming into an area of interest.

Trailspotting.com

This outdoor site boasts an outstanding collection of hiking trails in Northern California and Hawaii. In-depth reviews, photos and comments are coupled with Google My Maps for visualization.

Stuart and Jenna, the outdoor enthusiasts who run this terrific site, go the extra mile to include enhanced content like area facts, photography, nearby POI, and location web sites.

Topo! Explorer

I bought the 10 CD set of Topo! from NatGeo years ago and really enjoyed browsing/zooming into locations, then printing my own weatherproof map before embarking on an expedition.

Today, they've made this much easier. A free registration gets you access to browse the latest Topo! maps which uses our JavaScript Maps API as a framework to explore their custom map tiles.

These are just a few of the many great sites devoted to finding that perfect place to get some fresh air. I look forward to uncovering new sites in the future, as developers are always finding innovative ways to integrate the Maps APIs and outdoor exploration!

Billy Rutledge - Google Developer Relations

Posted:

My name is Wolfgang Pichler. I have been developing with the Google Maps JS API for a few years now, posting in the forums and publishing my various experiments for others to learn from.

When a user right-clicks on Google Maps, a context menu appears with options like getting directions, zooming in, or finding the address of the center point (reverse geocoding). Since I wanted this helpful feature in my own maps, and the core API does not provide it, I decided to implement a fully open-source version and release it in the utility library: ContextMenuControl.

This control includes all the same items as the native Google Maps control, but I've implemented the directions functionality in a different way. Instead of requiring the developer to provide a panel and inserting the directions steps there, I create infowindows that the user can step through. Now, any developer can use this control and not worry about having to allocate space on their page for the directions steps. The directions functionality also includes the ability to add, remove, and drag points, so that the user can easily customize their query.

The result is a control that's easy for users and easy for developers, and is probably the fastest way to add reverse geocoding and directions functionality to your map (especially if it's a small map). Just include the script tag for the source code, insert this line in your map init function, and you'll get a right-click menu like the screenshot shows below:

  map.addControl(new ContextMenuControl());

For more information, read through the reference and developer's guide. For other open-source extensions that can enhance your mashup, check out the utility library. Enjoy giving your users the power of right-click!


Posted:

Calling all Bay Area coders! We've just finalized another hackathon for late September! On September 24th, 2009, from 1:30 to 8, Google will host a hackathon for our Geo APIs in our San Francisco office. At the hackathon, Google engineers will give one or two API overview presentations and then will be on hand to answer all your geo related questions. You can work on suggested codelabs, or just bring your own project and we'll lend you a hand.

The hackathon will cover the following APIs:

Space is limited, so register now! And remember, this will be a code-heavy event, so bring your laptop and come ready to code!

Posted:

Obviously, we love when we see developers using the Maps API to create sophisticated and innovative applications. It makes us feel good that we put time into creating our APIs, and it excites us that there are so many creative developers in the world. But, we don't always wear our heart on our sleeve, and share our love for great uses of the APIs with everyone. So, we're initiating a series of blog posts about our favorite maps, and this is the first in the lot. We'll also use this series as a way to introduce you to other members of our ever expanding team here. You likely already know me, as I'm something of a regular on this blog - getting started 3 years ago with a post showing how to use the then-just-introduced GPolygon (man, that makes me feel old). So, I'll go straight into my favorites.

I was once asked what I thought the next frontier in maps mashups was, and I responded: "time". Why? It's tricky figuring out how to display layers of data on top of a map, but it's even trickier to squeeze in one more dimension and display time-based data, and I admire those developers that take on the challenge. Here are some examples:


NYC Homicides Map
Displays 10 years of homicide data in New York City, including as recent as the last 2 weeks (eerie!). They give users a slider to quickly slide through the years and see how the density changes, and also give them different options for coloring the data. It's a great, simple combination of two different ways of visualizing data.
RozTracker
Shows the voyage of a woman that's in the middle of rowing across the Pacific. The user can see how many oar strokes she's done, and zoom in to see her tweets, blog posts, and videos from the voyage so far.
WW2 TimeMap
Displays WW2 events using TimeMap, the open-source project combining the SIMILE Timeline with the Google Maps API. It's a rich timeline that's able to show long-running events as well as single-time events, and deals with overlapping events. It means that the developer can open the map up to user contributions, and not worry about the usability of the interface being compromised.
Manhattan Map
Shows what Manhattan looked like hundreds of years ago (a whole lot greener), and gives the user a slider to change the transparency of the 1609 imagery, giving the illusion of the modern-day landscape fading in. The user can also hover over individual city blocks for information on what that block was like back then.
TimeSpace
Clusters the top news stories on the map, and gives the user a time slider to pan through the day's events. The graph underlaid beneath the slider shows how the news density varies during the day, and a search box lets the user filter the news displayed. It's a much more fun way to browse the news, and a good way to encourage readers to be interested in news all over the world.

As you can see, there are a lot of ways to show time-based data on maps, and each of them suit different needs. The important thing is that developers are pushing the envelope and experimenting with different interfaces, and putting it out there for all of us to enjoy. For more examples like these, check out the "Timeline" label in the Google Maps Mania directory. Tune in next week to hear about more of our favorites! :)

Posted:

The Google Maps API v3, our new lightweight version of the JavaScript API, has been out for a few months now, and we want to help developers use this API with server-side scripting and databases. So, we've added an articles section to the documentation with three new articles:

We've also added links to articles from developer Gabriel Svennerberg, who has started a series on Maps API v3 and is in the process of writing a book.

If you have written an article about using any of our APIs, please let us know using this form. We love to see developers adding knowledge to the community.