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:
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
Where does the data come from?
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.
The data for Tech Comm on a Map is in a Google Sheets spreadsheet. It looks something like this:
- In Google Sheets, choose ‘Tools’ > ‘Script Editor’.
- Add a new script as a blank project.
- Insert the above code.
- Choose ‘File’ > ‘Manage Versions’, and name the latest version of the script.
- 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.
- Choose ‘Deploy’.
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.
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):
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.
Tech Comm on a Map is an ongoing project. We technical communicators are using a map to document our presence in the world!
Posted by Sarah Maddox, Google Developer Relations team.