Tuesday, August 12, 2014

Turning down the Flash Maps API


On September 2nd of this year the three year deprecation period for the Google Maps API for Flash will come to a close and the API will be turned off on that date. We encourage developers of existing applications to migrate to JavaScript Maps API v3 as soon as possible.

Over the past 3 years we’ve added numerous additional features to v3, such as elevation, cycling and transit directions, symbols, and support for GeoJSON, making it our most powerful and well used Maps API ever. Developers looking to migrate to the JavaScript Maps API v3 can find answers to any questions they have on StackOverflow. Our support page has the right StackOverflow tags to peruse.

Alternatively, if you are a Maps API for Business customer you can get help through the Enterprise support portal (check the Resources tab).

Posted by Mano Marks, Developer Relations Team

Wednesday, July 9, 2014

Putting your Professional Group on the Map

People love to know what’s happening in their area of expertise around the world. What better way to show it, than on a map? Tech Comm on a Map puts technical communication tidbits onto an interactive map, together with the data and functionality provided by Google Maps. 

I’m a technical writer at Google. In this post I share a project that uses the new Data layer in the Google Maps JavaScript API, with a Google Sheets spreadsheet as a data source and a location search provided by Google Places Autocomplete. 

Although this project is about technical communication, you can easily adapt it for other special interest groups too. The code is on GitHub.

The map in action 

Visit Tech Comm on a Map to see it in action. Here’s a screenshot:

The colored circles indicate the location of technical communication conferences, societies, groups and businesses. The “other” category is for bits and pieces that don’t fit into any of the categories. You can select and deselect the checkboxes at top left of the map, to choose the item types you’re interested in.  

When you hover over a circle, an info window pops up with information about the item you chose. If you click a circle, the map zooms in so that you can see where the event or group is located. You can also search for a specific location, to see what’s happening there. 

Let’s look at the building blocks of Tech Comm on a Map.

Getting hold of a map

I'm using the Google Maps JavaScript API to display and interact with a map.

Where does the data come from?

When planning this project, I decided I want technical communicators to be able to add data (conferences, groups, businesses, and so on) themselves, and the data must be immediately visible on the map. 

I needed a data entry and storage tool that provided a data entry UI, user management and authorization, so that I didn’t have to code all that myself. In addition, contributors shouldn’t need to learn a new UI or a new syntax in order to add data items to the map. I needed a data entry mechanism that is familiar to most people – a spreadsheet, for example. 

In an episode of Google Maps Developer Shortcuts, Paul Saxman shows how to pull data from Google Drive into your JavaScript app. That’s just what I needed. Here’s how it works.

The data for Tech Comm on a Map is in a Google Sheets spreadsheet. It looks something like this:

Also in the spreadsheet is a Google Apps Script that outputs the data in JSON format:

var SHEET_NAME = 'Data';
function doGet(request) {
 var callback = request.parameters.jsonp;
 var range = SpreadsheetApp
 var json = callback + '(' +
     Utilities.jsonStringify(range.getValues()) + ')';
 return ContentService

Follow these steps to add the script to the spreadsheet and make it available as a web service:
  1. In Google Sheets, choose ‘Tools’ > ‘Script Editor’.
  2. Add a new script as a blank project.
  3. Insert the above code.
  4. Choose ‘File’ > ‘Manage Versions’, and name the latest version of the script.
  5. Choose ‘Publish’ >  ‘Deploy as web app’. Make it executable by ‘anyone, even anonymous’. Note: This means anyone will be able to access the data in this spreadsheet via a script.
  6. Choose ‘Deploy’.
  7. Copy the URL of the web service. You’ll need to paste it into the JavaScript on your web page.

In your JavaScript, define a variable to contain the URL of the Google Apps script, and add the JSONP callback parameter:

Then use jQuery’s Ajax function to fetch and process the rows of data from the spreadsheet. Each row contains the information for an item: type, item name, description, website, start and end dates, address, latitude and longitude.
 dataType: 'jsonp',
 success: function(data) {
   // Get the spreadsheet rows one by one.
   // First row contains headings, so start the index at 1 not 0.
   for (var i = 1; i < data.length; i++) {
       properties: {
         type: data[i][0],
         name: data[i][1],
         description: data[i][2],
         website: data[i][3],
         startdate: data[i][4],
         enddate: data[i][5],
         address: data[i][6]
       geometry: {
         lat: data[i][7],
         lng: data[i][8]

The new Data layer in the Maps JavaScript API

Now that I could pull the tech comm information from the spreadsheet into my web page, I needed a way to visualize the data on the map. The new Data layer in the Google Maps JavaScript API is designed for just such a purpose. Notice the method map.data.add() in the above code. This is an instruction to add a feature in the Data layer. 

With the basic JavaScript API you can add separate objects to the map, such as a polygon, a marker, or a line. But by using the Data layer, you can define a collection of objects and then manipulate and style them as a group. (The Data layer is also designed to play well with GeoJSON, but we don’t need that aspect of it for this project.) 

The tech comm data is represented as a series of features in the Data layer, each with a set of properties (type, name, address, etc) and a geometry (latitude and longitude).

Style the markers on the map, with different colors depending on the data type (conference, society, group, etc):

function techCommItemStyle(feature) {

 var type = feature.getProperty('type');

 var style = {

   icon: {
     path: google.maps.SymbolPath.CIRCLE,
     fillOpacity: 1,
     strokeWeight: 3,
     scale: 10        
   // Show the markers for this type if
   // the user has selected the corresponding checkbox.
   visible: (checkboxes[type] != false)

 // Set the marker colour based on type of tech comm item.
 switch (type) {
   case 'Conference':
     style.icon.fillColor = '#c077f1';
     style.icon.strokeColor = '#a347e1';
   case 'Society':
     style.icon.fillColor = '#f6bb2e';
     style.icon.strokeColor = '#ee7b0c';


     style.icon.fillColor = '#017cff';
     style.icon.strokeColor = '#0000ff';
 return style;

Set listeners to respond when the user hovers over or clicks a marker. For example, this listener opens an info window on hover, showing information about the relevant data item:
 map.data.addListener('mouseover', function(event) {

The Place Autocomplete search

The last piece of the puzzle is to let users search for a specific location on the map, so that they can zoom in and see the events in that location. The location search box on the map is provided by the Place Autocomplete widget from the Google Places API.

What’s next?

Tech Comm on a Map is an ongoing project. We technical communicators are using a map to document our presence in the world!

Would you like to contribute? The code is on GitHub.

Posted by Sarah Maddox, Google Developer Relations team.

Monday, July 7, 2014

Recap of Google Maps at I/O 14

Maps had a great I/O 2014, with four sessions and three I/O Bytes. Not to mention all the partners in the sandbox who were using the Maps API!

For those who want to relive Google I/O, or catch up on sessions you missed, we’ve created a playlist of Maps videos:

Enjoy watching, and happy mapping!

Posted by Mano Marks, Developer Relations Team

Tuesday, June 24, 2014

Maps at I/O'14

Google I/O starts tomorrow, and as always, Google Maps is a big part of the show. The team has been working hard to give developers a great experience. We’re looking forward to seeing you there, or your comments online on our videos. There will be lots of maps engineers, developer relations team members, product managers and more around I/O. So if you’re there, find us, say hi and show us your apps!

We’ve already released one video (embedded below). Watch the I/O Bytes 2014 channel for more to come. Also in this post is a tantalizing glimpse into four of our I/O sessions.


Map Up your Apps!
with Megan Boundey

Interested in adding Google Maps to your mobile apps but needing inspiration? Did you know that you can now add Street View to your apps too? See how incorporating maps into your app can delight your users! We'll show you some exciting uses of the Google Maps Mobile APIs and describe the functionality available in the APIs as we go.


The first three sessions are available by livestream, and all sessions will be available on YouTube in the Google Developers Channel after I/O.

Google Maps is creating the world's most comprehensive geolocated photo library through Street View. We're also empowering anyone to contribute photos and 360-degree panoramas to Google Maps via products like Trekker, Business View, Views, and Photo Sphere. In this talk, we'll show how developers can integrate billions of panoramas into their projects. We'll also show how anyone can quickly publish imagery of places they care about, then easily access them via our APIs and viewers. This session is relevant to developers creating experiences that include location and imagery.

Satellites have been systematically collecting imagery of our changing planet for more than 40 years, yet until recently this treasure trove of “big data” has not been online and available for high-performance data mining. This session will cover the new Google Earth Engine technology and experimental API for massively-parallel geospatial analysis on daily-updating global datasets such as Landsat satellite imagery. Scientists and other domain experts are developing new EE-powered applications which map, measure and monitor our changing planet in unprecedented detail, for the benefit of people and the environment. Applications include tracking and reducing global deforestation; mapping and mitigating the risks of earthquakes and extreme weather events such as floods and drought; and even creating new kinds of geo-visualizations such as the 2014 Webby award-winning “Timelapse” - a zoomable, browsable HTML5 video animation of the entire Earth from 1984-2012, built from nearly a petabyte of Landsat data. These early results merely hint at what’s now possible.

How do you redesign a product used by a billion people? The Google Maps team recently launched their biggest redesign since the product was introduced 8 years ago. The lead designers will take you through the journey, illustrating three lessons learned that can apply to any design and product development process.

Built on Google’s developer platform, Santa Tracker lets millions of children and adults track Santa in 34 languages as he delivers presents across the world. The project’s technical leads go behind the scenes to provide insight into the challenges of building a cohesive Google developer platform experience across mobile/desktop web, Android, Chromecast, Maps and Search; all powered by a Go AppEngine backend.

See you at I/O, or online at +GoogleMapsAPI and @GoogleMapsAPI.

Posted by Mano Marks, Developer Relations Team

Monday, June 23, 2014

New Place IDs and Add-a-Place features in the Places API!

With rich autocomplete and place search functionality, the Google Places API includes several powerful features to find, discover, and interact with the world’s places. Now we’re making it even easier for developers to work with places by launching Place IDs and enhancements to our Add-a-Place functionality!

Place IDs

Until today, Places API developers had to work with a dual-ID system: IDs (id) were used to compare places and References (reference) were for fetching a place’s information. The new Place IDs (place_id) can serve both those purposes, and are also shorter and simpler than the typically long and unwieldy References.

With today’s launch, Place IDs will be returned in all responses that include the existing ID and Reference fields, and they can also be used instead of References to uniquely identify a place in Place Details requests. We believe Place IDs have clear functional and simplicity benefits over the previous ID and Reference system, and we’ll be removing IDs and Reference support from the Places API a year from now, on June 24th, 2015.


While Google strives to bring developers the freshest local data, sometimes users know about places before we do, and we want to make sure they can add and interact with new places right away. That’s why the Places API has an Add-a-Place feature, that with today’s update, can also include a new place’s address, website, and phone number in the request.

This additional data will be automatically associated and returned with the new place, so end-users can benefit from additional useful place information without forcing developers to store extra data. The new fields also help streamline Google’s internal place moderation process, which augments Google’s places repository with places added via the Places API, leading to more up-to-date, comprehensive, and accurate local data for everyone.

A great example of how to integrate the Add-a-Place feature is Zodio, a popular social location-based app from Thailand. They use the Places API’s Add-a-Place feature in their check-in experience so their users can always share where they are, even if the place is currently missing from the Places API.
Please visit our developer documentation to learn more about the Places API. As you build the next awesome location-based app, please post any questions to our StackOverflow community and send us feedback via the Google Maps API Issue Tracker.

Posted by David McLeish and Kevin Tran, Software Engineers, Google Places API