Posted:
By Sarah Maddox, Google Developer Relations team

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 SPREADSHEET_ID = '[MY-SPREADSHEET-ID]';
var SHEET_NAME = 'Data';
function doGet(request) {
 var callback = request.parameters.jsonp;
 var range = SpreadsheetApp
     .openById(SPREADSHEET_ID)
     .getSheetByName(SHEET_NAME)
     .getDataRange();
 var json = callback + '(' +
     Utilities.jsonStringify(range.getValues()) + ')';
 
 return ContentService
     .createTextOutput(json)
     .setMimeType(ContentService.MimeType.JAVASCRIPT);
}


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:

var DATA_SERVICE_URL =
  "https://script.google.com/macros/s/[MY-SCRIPT-ID]/exec?jsonp=?";

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.

$.ajax({
 url: DATA_SERVICE_URL,
 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++) {
     map.data.add({
       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';
     break;
   case 'Society':
     style.icon.fillColor = '#f6bb2e';
     style.icon.strokeColor = '#ee7b0c';
     break;
. . . SNIPPED SOME DATA TYPES FOR BREVITY
   default:
     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) {
   createInfoWindow(event.feature);
   infoWindow.open(map);
 });

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 Louis Gray, Googler

Posted:
By Jen Kovnats, Google Maps API Team

Cross-posted from the Google Geo Developers blog

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.

Jen Kovnats is a Product Manager on the Maps API team bent on making mapping easy.

Posted by Louis Gray, Googler

Posted:
Author PhotoBy Josh Livni, Maps Developer Relations Team

Cross-posted with the Google Geo Developers Blog

Last week Felipe and Michael from the Google Cloud Platform Developer Relations team released a video demonstrating the new Pearson correlation analysis available in Google BigQuery. Their example used more than 70 million flight records to find correlations on departure times, which could be used to predict whether your plane would be late. Specifically, you can find out which set of airports best predict your airport’s possible flight delays the following day.

As you can see from their code (watch the video for context), they’re using iPython Notebook to work with the BigQuery results, and matplotlib to get a quick visual of results. But one aspect that’s hard to see in these results is the spatial relationship of the airports. Maps to the rescue!

My goal was to create a simple visualization, where selecting any airport would highlight which airports you should look at to predict delays the next day. Using the Google Maps JavaScript API I went ahead and did just that:



To create this map, using the same code noted above, we first created a JSON dump of the correlations on departure time for each airport to each other airport. Then, using an article on visualizing earthquakes as a template, I modified the code so that we have a simple dictionary of all airports, keyed by their airport id. Last but not least, I added a function that gets called when an airport marker is clicked in order to restyle all the other airport markers according to their correlation. This method checks the selected season (winter, for example, has different correlations than spring), and highlights correlated markers by setting the color and scale of the circle symbol.


Thanks to BigQuery, running complex correlations over billions or trillions of attributes is surprisingly easy. But don’t forget if your data does have some spatial component, a quick mapping visual can add some great context to your results.


Josh Livni works with maps at Google, where he helps developers tell compelling stories using the Google Maps APIs. As you read this, he's probably writing code, thinking about snowboarding, or both.

Posted by Scott Knaster, Editor

Posted:
Author PhotoBy +Scott Knaster, Google Developers Blog Editor

Regular Fridaygram readers know that Street View goes places even if there aren’t any streets, like the Galapagos Islands. This week we launched the panoramic images collected earlier this year with the Street View Trekker, and they’re pretty cool.


As we mentioned back in May, we also used an underwater camera to collect images of marine life in the waters off the Galapagos. Between the land and the sea, we collected pictures of blue-footed boobies, Magnificent Frigatebirds, and other island creatures. These images will help with Galapagos environmental research. If you’re interested, you can read more about it.

Speaking of the wonders of nature, researchers have used high-speed video cameras to record insects with natural gears that mesh to enable movement. Scientists Malcolm Burrows and Gregory Sutton of the University of Cambridge found that young planthoppers have microscopic gear teeth that synchronize their legs when they jump. Their legs move within 30 millionths of a second of each other, ensuring that their jumping is effective. As the insects mature, they lose these baby teeth and learn to jump without them.

Finally, last Wednesday’s Google Doodle honored the birthday of legendary physicist Léon Foucault, namesake of the Foucault pendulum, which shows the effect of the Earth’s rotation. The doodle itself is a working Foucault pendulum, complete with controls to change its time and location. We hope it inspires you to do some weekend inventing and adventuring of your own.


The world keeps turning, and Fridaygram keeps publishing. Look us up for nerdy cool news right before you start your weekend. And for still more amazing Galapagos stuff, see Darwin for a Day, built by the Charles Darwin Foundation and iNaturalist using the Street View API.

Posted:
Author PhotoBy Monica Tran, Google Maps API Team

This week's Map of the Week post from the Geo team features Adam Ratana's Sun Surveyor app, which allows photographers, gardeners and builders to visualize sun and moon paths over locations around the world. The Sun Surveyor app has both Map and Augmented Reality views, which not only let you see the sun and moon paths over satellite imagery, but also via your phone's camera, while you're onsite at the shoot.

Visualizing the sun and moon paths in Augmented Reality and Map views

Adam's users requested the ability to visualize the sun and moon paths on top of Street View panoramas, which would give them a better IRL (in real life) approximation of lighting for their photo shoots. When Street View launched in the Google Maps SDK for iOS, Adam did just that, bringing the feature to life for users in just a weekend.

Visualizing sun and moon paths on top of Manhattanhenge in Sun Surveyor

We were impressed by his clever use of overlays to mimic the sun and moon path polylines that you see in the app. In his three-step tutorial on the Geo Developers Blog, Adam walks us through his approach to implementing overlays in Street View by:
  1. Creating an overlay on top of the panorama upon which to draw the items
  2. Synchronizing the positions of the overlay items with the panorama as it moves
  3. Determining which data are visible and where on the screen to draw them
Check out Adam's post on the Geo Developers Blog for code snippets and details on the sample project.

And in the meantime, enjoy following the sun and moon to distant locations in Sun Surveyor.

Adéle Penguin Rookery, Antarctica (from the Antarctica Collection)

Hanauma Bay, Hawaii (from the Google Maps Ocean project)


Norway

Stonehenge (from the UNESCO World Heritage Collection)




Adam Ratana is a Carnegie Mellon University graduate living in, and loving, Pittsburgh, PA. He produces dance music as a member of Pittsburgh Track Authority, enjoys photography, traveling with his wife, and writing fun software in his free time. Adam also enjoys attending the Pittsburgh Cocoaheads chapter meetings.



Sun Surveyor visualizes the sun and moon in a variety of ways for photographers, filmmakers, solar industry professionals, architects, homebuyers, gardeners, and anyone needing to predict or understand the movement of the sun and moon.

Monica Tran joins us from our Google Maps API team in Sydney, where she helps developers tell stories and build businesses with maps.

Posted by Scott Knaster, Editor