Category Archives: tech comm on a map

I’m very excited, because there’s an Android app on its way for Tech Comm on a Map. The Android app uses the same data source as the Tech Comm on a Map website – so you can see the same events on the map in both apps. In addition, you can add events to the map directly from within the Android app, and it does smart marker clustering too.

Tech Comm on a Map puts technical communication titbits onto an interactive map, together with the data and functionality provided by Google Maps. It’s already out there on the Web. See it in action on the Tech Comm on a Map website, and read more on this page.

And now the Android app

The code for the Android app is already on GitHub. A group of us got together during a hackathon and created the initial version of the app. I’ve added to the app since then, and intend to continue improving it. Eventually I’d like to add it to the Google Play store. There’s a bit to do before that. 🙂

Friendly disclaimer: Although I work at Google, this app is not a Google product. It’s a personal project by me and the other contributors.

The Tech Comm on a Map app for Android is developed with Java and the Android SDK. It uses the following APIs:

A smart colleague showed me how to tweak the data source for Tech Comm on a Map so that I can allow data entry via a form, and moderate each entry before it appears on the map. This means technical writers around the world can add items to the map directly, instead of asking me to do it via a comment on this blog. Too cool!

Would you like to add a conference, society, group, business, or educational course to the map, or some other titbit that technical writers will find interesting?

Any items you add will be saved for moderation, and will appear on the map once they’ve passed review.

Background info

Tech Comm on a Map puts technical communication titbits onto an interactive map, together with the data and functionality provided by Google Maps. Read more about Tech Comm on a Map or see it in action.

Tech Comm on a Map now has a category for educational programs and courses, such as university technical communication degrees or certificates and other training courses. Take a look and let me know if you have something to add.

Tech Comm on a Map puts technical communication titbits onto an interactive map, together with the data and functionality provided by Google Maps. It’s a great way of seeing what we tech writers are up to, around the world. To find out more about the project, or to add something to the map, check out the project information page.

Tech Comm on a Map now displays all the 2015 technical communication conferences that I’ve found so far. Take a look, and let me know if there are any more tech comm conferences, groups, businesses or societies to add.

Tech Comm on a Map puts technical communication titbits onto an interactive map, together with the data and functionality provided by Google Maps. It’s a great way of seeing what we tech writers are up to, around the world. To find out more about the project, or to add something to the map, check out the project information page.

This week I published a post on the Google Geo Developers Blog describing the building blocks of Tech Comm on a Map. That post assumes some knowledge of the Google Maps JavaScript API, so I’ve decided to write a top-up post with a little more detail.

Tech Comm on a Map puts technical communication titbits (societies, groups, businesses and conferences) onto an interactive map, together with the data and functionality provided by Google Maps. You can grab a copy of the code from GitHub. The most relevant bits are the HTML that defines the web page (index.html) and the JavaScript that defines and interacts with the map.

Loading the Google Maps JavaScript API

The first thing is to get hold of a map via the Google Maps JavaScript API. An HTML element imports the Google Maps JavaScript API library into the web page:

Now all the functions of the Google Maps JavaScript API are available to the web page, and I can call them from my own JavaScript. With just a few lines of code I get an interactive Google map, loaded with geographical data and offering the default set of user functionality: zoom, pan, the choice of map view or satellite view, and Street View. To get started, see the Google Maps JavaScript API documentation.

You may have noticed the libraries parameter in the above <script> element:

&libraries=places

I’ve added that parameter to request the Places library, which I use for the search box on the map as described later in this post.

Putting the map into the HTML page

The HTML file contains a <div> element, with an ID, to define a place to put the map. In this case, I’ve called it “map-canvas”.

<div id="map-canvas">

Now the JavaScript can refer to that <div> when inserting the map onto the page. In essence, the JavaScript consists of two sections:

A function, here called “initializeMap()”, that sets up the map options and then adds the map to the page.

A listener that waits until the page has finished loading, then adds the map by calling the “initializeMap()” function.

Below is part of the “initializeMap()” function. It creates the map object, google.maps.Map, passing it the <div> element that will contain the map, and a number of parameters that define the map centre, zoom factor, and other options:

Other (blue circles), a grab bag to catch anything that doesn’t fit into the above categories.

The data is held in a Google Docs spreadsheet. Any changes we make in the spreadsheet are immediately reflected on the map. For details on setting up such a spreadsheet, and pulling the information into the map, see my post on the Google Geo Developers Blog.

The Place Autocomplete search box

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.