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 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 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.

Video


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.


Sessions

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.

Add-a-Place


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.
Zodio_Add_Name.png
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

Wednesday, June 4, 2014

Sunsetting the Google Maps JavaScript API Panoramio and Weather libraries, and a Flash Maps API reminder

In the past few years we’ve seen GeoJSON explode as a method to share geographic data and developers are using GeoJSON to create amazing visualizations. As a consequence, however, we’re seeing less interest in non-customizable layers directly provided by API providers.

So, starting today, we will begin sunsetting the Google Maps JavaScript API v3 Panoramio Library and Weather Library. Per the terms of our deprecation policy, the Panoramio, weather, and cloud layers served by these libraries will continue to function until one year from today and will be removed on June 4, 2015.

We’d also like to remind developers that the Flash Maps API’s deprecation period ends on September 2, 2014. The Flash Maps API will shut down on that date, so if you’re still using the API, it’s time to start planning your migration.

If you have any questions about these announcements, our friendly developer relations team is always happy to help. Please tag questions with ‘google-maps-api-3’ on StackOverflow and we’ll respond shortly.

Tuesday, May 27, 2014

Street View is here! What’s new in the Google Maps Android API v2

The new release of the Google Maps Android API v2 is now available! Read on to find out about Street View and programmatic control of indoor maps available in the Google Play Services 4.4 release.


Street View

Street View is here! Let your users navigate through Street View's panoramic 360-degree views themselves, or programmatically control the zoom and orientation of the Street View camera. You can enable and disable Street View controls and gestures, as well as toggle the display of street names on or off. The Street View coverage available through the Google Maps Android API v2 is the same as that for the Google Maps for Android app on your Android device. Take a look at these two apps using Street View to help users get even more out of their experience.

Runtastic Running & Fitness, which helps people map and track their fitness activities, now features Street View. When you review a completed activity, Street View panoramas of places you’ve passed by are presented as a slideshow. You can even go full screen to explore the surroundings of your route in greater detail.


Do you have a store locator in your app, but wish that users could tell whether your store is in a strip mall or on the street? Now you can! You can even bring users into your store using Business View. The same StreetViewPanorama object provides seamless access to both indoor Business View and outdoor Street View imagery.

The Walgreens App has integrated Google Street View with its Store Locator feature, making it easier than ever for Walgreens customers to get in, get out and get on with their day. With the updated Store Locator feature, customers can easily find a Walgreens, access store details and view the store location up close.


Programmatic Control of Indoor Maps

In this release, we’ve added programmatic control to Indoor Maps. You can disable the default level picker (floor picker) by calling setIndoorLevelPickerEnabled(false) and add your own custom level picker instead. You can also determine which building and level is currently in focus and set a listener to be called when a new building comes into focus or a new level is activated within a building. This is particularly useful if you want to show custom markup for the active level.

  

We’re always interested to hear how you’re using Google 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 SDKs