Wednesday, April 9, 2014

Build a map infographic with Google Maps & JavaScript

We recently announced the launch of the data layer in the Google Maps JavaScript API, including support for GeoJSON and declarative styling.  Today we’d like to share a technical overview explaining how you can create great looking data visualizations using Google Maps.

Here’s our end goal. Click through to interact with the live version.

Data provided by the Census Bureau Data API but is not endorsed or certified by the Census Bureau.

Tuesday, March 18, 2014

Maps made easier: GeoJSON in the JavaScript Maps API

Maps give us an easy way to visualize all types of information, from patterns in health expenditure across the world, to oceans with the highest concentration of coral reefs at risk. The tools used to create these maps should be just as easy to use. That’s why, starting today, the JavaScript Maps API will support GeoJSON, making it simpler for developers to visualize richer data, with even cleaner code.

GeoJSON has emerged as a popular format for sharing location-based information on the web, and the JavaScript Maps API is embracing this open standard. This means, as a developer, you can now pull raw data from multiple data sources, such as the US Geological Survey or Google Maps Engine, and easily display it on your website.

How does it work? The new Data layer allows you to treat a dataset like… well, a set of data, rather than individual and unrelated features. If you have a GeoJSON file, you can now load it on the map simply by adding a single line of code to your JavaScript:

map.data.loadGeoJSON(‘earthquakes.json’);


Earthquakes over the past week loaded on the map

Tada! And what’s more, most places have attributes beyond just location: stores have opening times, rivers have current speed, and each Girl Guide troop has cookie selling turf. The Data layer allows you to represent all attributes in GeoJSON right on the map and make decisions about what data to display more easily.

You can use this information to create a styling function that says, “show the earthquakes as circles, scaled to their magnitude” and as the data or rules are updated, the styling will automatically be applied to every feature. This beats having to manually update each feature or rule as more information is added to the map.

Earthquakes over the past week, with a styling function applied


Earthquakes over the past week, with additional color and basemap styling applied

Get started by checking out our developer docs, the code for these earthquake maps, this cool demo showing data from different sources, and this Google Developers Live video. This is a new feature, so if you run into problems or think of any additions you’d love to see, get help on StackOverflow and check our support page for the right tags to use.

We’re looking forward to seeing what you build with this new tool and, as always, we’re eager for your feedback. Please comment on this post or on our Google+ Page.

Posted by Jen Kovnats, Product Manager on the Maps API Team

Thursday, March 13, 2014

Streamlining code in the JavaScript Maps API

Since the Google Maps JS API v3 launched in 2009, we have added lots of new features. And we’ve also made occasional modifications to the API to minimize and simplify common code pathways for developers.


Today we want to announce two small, but useful, changes we have recently made. The first lessens the amount of code required to create a map. The second evolves the API towards a more standard pattern of using plain JavaScript objects.


The first change was introduced quietly a few versions ago, and made the Map Type an optional parameter (defaulting to the standard ROADMAP type) when instantiating a new map.


The second change is available in versions 3.16 of the API and above, and introduces a new way of creating a location: instead of google.maps.LatLng(37.5, -122.5), you can now simply pass in a plain JavaScript object like {lat: 37.5, lng: -122.5}.


Let’s take a look at how these changes affect the original code from our launch announcement above:


Original:
var myOptions = {
     zoom: 8,
     center: new google.maps.LatLng(-34.397, 150.644),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };


New
   var myOptions = {
     zoom: 8,
     center: {lat: -34.397, lng: 150.644}
   };


Note that since the order of the values no longer matters, the following is equally valid:
     center: {lng: 150.644, lat: -34.397}
The end result is less code needed to instantiate a basic map, less opportunity for confusion regarding coordinate ordering, and a more flexible way to create locations.


Note that google.maps.LatLng will continue to work, and there’s no need to modify any of your existing code. These new features are simply designed to help those getting started, and help you create more streamlined and readable code.


As always, we love to get feedback on how even minor changes like this affect your workflow. You can comment on this post or on our Google+ Page. And as always, you can get help on StackOverflow. Check out our support page for the right tags to use.

Posted by Josh Livni, Maps API Team

Tuesday, March 11, 2014

Adding the new Google Maps to your website just got easier with the new Google Maps Embed API

Since we introduced the ability to embed the new Google Maps, a growing number of sites across the web have been helping their visitors visualize and remember places, using maps built for them. However, we know that many sites require multiple maps, and repeatedly generating them can be a challenge.

Today we're making this easier by launching the Google Maps Embed API, giving developers the ability to generate HTML snippets that embed Google Maps within their own website. Using the API to take control of your embedded maps, you can now effortlessly customize the location and appearance of the map with a handful of simple URL parameters.

For example, our friends at the Guggenheim in New York are using the Google Maps Embed API, allowing visitors to save the location to Google Maps directly from the website. Visitors can then quickly plan their day and navigate to the museum by pulling up their saved places on any device with Google Maps.

Over in San Francisco, SFMOMA is using the Google Maps Embed API to show the museum’s temporary exhibit locations. Visitors can get easily get directions to these locations and save them to Google Maps for later viewing on any of their devices.

In addition, over the coming weeks, we’ll be updating existing classic Google Maps embeds to the new format so visitors can enjoy a consistent embedded Google Maps experience across the web. This also means that starting today, the Maps/Earth APIs Terms of Service will apply to all updated embedded Google Maps.

Finally, as with our existing embedded maps, the Google Maps Embed API is free and without limits, and the new API also includes the same on-map ad experience we introduced to embedded maps in November.

To get started, head over to our developers page and embed away!


Friday, February 14, 2014

Fab Friday Android Video Roundup

Author PhotoHey everyone! Last November I moved to Z├╝rich. The chocolate has been so entrancing that I’m falling behind on my Fab Friday posts! The last few weeks have seen a number of Google Android Maps API videos going out, so I thought I’d do a roundup for you.


First up, Paul Saxman worked on a video with the Android team. Let’s take a look at that one first: UXD - What is Context and Why Does it Matter? Nazmul Idris and Paul Saxman distill user research data to show you how people use their devices, what expectations they have from them, and how this changes with their context.




Paul also brings us Getting Started with Markers on Android, where he covers the basics of adding markers to your map using the Google Maps Android API v2.




Next up, we have one from a newcomer to GDLs, Sarah Maddox. Sarah brings you Map Padding in the Google Maps Android API v2. With map padding, you can allow a sidebar or other UI features to hide part of a map, without hiding the Google logo and map UI controls.




Lastly, two of our fantastic interns, Emma Yeap and Iris Uy, worked on additions to the Google Maps Android API Utility Library, and included this video explaining the new and much asked for Heatmap library. Great work!




That’s all for now. Have a great weekend and happy mapping!

Posted by Mano Marks, Google Maps API Team

Wednesday, February 12, 2014

Marker Clustering and Heatmaps: New features in the Google Maps Android API Utility Library

A new version of the Google Maps Android API Utility Library is now available, which includes some cool new data visualisation features - marker clustering and heatmaps.

Marker Clustering

When you have a lot of data to show, it can be hard to keep your app from becoming cluttered and messy. One solution is to group nearby markers into a single marker (cluster marker). When viewed zoomed in, individual markers are shown. However, as the user zooms out, markers group together into a single cluster marker.

You can also easily customize the appearance of individual and clustered markers.


custom rendering for clusters clustered markers with default look

Left: clustered markers with default look
Right: custom rendering for clusters using the IconGenerator utility

Marker clustering is ideal for visualising a large number of elements on a map whilst minimising clutter. You see a concise summary of your data when zoomed out, and as the markers separate when you zoom in, you don't lose any detail from your data.

Heatmaps

Heatmaps are another new visualisation available in the utility library. Heatmaps represent geospatial data on a map by using different colours to represent areas with different concentrations of points - showing overall shape and concentration trends. Heatmaps are also known as "intensity maps".

For an overview of the heatmaps library, watch the video below:


You can use a heatmap to visualise any data set that has a geospatial component. For example, the below heatmap shows the population of cities around the world, with cities as points on the heatmap, weighted by population:

Heatmap of the population of the world

To get started with the Android Maps API Utility Library, view the setup guide - you can also view our guides on how to use the marker clustering and the heatmap features. For a summary of previously existing features in the utility library, view Chris Broadfoot's Maps Shortcuts video. As always, if you have any problems using the Android Maps API or the Utility Library, post to StackOverflow - our support page has the right tags to use.

Wednesday, February 5, 2014

Gradient Polylines and Structured Reverse Geocoding Results: Google Maps SDK for iOS v1.7

A new release of the Google Maps SDK for iOS is now available! Read on to find out about the new features included in v1.7.

Gradient Polylines

In this release we’ve included gradient polylines which allow you to apply different colors to different segments of your polylines. This allows you to easily indicate changes along your polyline such as speed or elevation.

There are two options:

The example below visualizes the elevation along a route using a gradient polyline.


Structured Reverse Geocoding

In the past, our reverse geocoder, GMSGeocoder, has responded to a latitude/longitude request with the address as a formatted string. In v1.7, GMSGeocoder can return the address as a GMSAddress object, enabling you to easily access the different parts of an address without needing to parse a string. For example if you’re only interested in the country, this is available as address.country. Check out the developer guide for further information about the properties available to you.

URL Schemes & x-callback-url

The comgooglemaps URL scheme lets you launch Google Maps for iOS, displaying the map at a particular location and zoom level, showing the results of a search, or showing directions. In addition to driving, public transit and walking directions, we’ve now added biking directions to the URL scheme.

There may be times, though, when you want to open Google Maps for iOS directly from within your app, but also want to provide the ability for users to easily return to your app via a back button when they are finished. X-callback-url, an open specification for inter-app communication and messaging between iOS apps, lets you do just that. We’ve documented how to use x-callback-url to launch Google Maps for iOS, and also how to help guide users back to your app when they are ready.

High fidelity 3D buildings

Finally, some of you may know that Google Maps for iOS now has some higher fidelity 3D buildings. If you’d like your app to have access to these 3D buildings, you’ll need to upgrade to v1.7 of the Google Maps SDK for iOS. Check out our favorite, the Eiffel Tower!


We’ve also included a few bug fixes which you can read about in the release notes.

We’re always interested to hear how you’re using the Maps APIs, so let us know if you’ve got something cool to show by tagging +Google Maps API on your posts (or comment right here). For technical questions that aren’t answered in the developer documentation, check out the Google Maps developer community on Stack Overflow. Don’t forget to tell us what you’d like to see in the next release using the Google Maps API issue tracker.

Posted by Megan Boundey, Product Manager, Google Maps Mobile APIs