Question

I’m using a Google form to collect simple (City, State) data from a group of people and then connecting the resultant spreadsheet to a Google Fusion Table (via onSubmit) of this javascript

http://kh-samples.googlecode.com/svn/trunk/code/appsscript.js

This Fusion Table then generates a map of the form input. It’s a very cool service, really.

Unfortunately, if two users enter the same City, State combination only a single marker is visible (because the latitude and longitude retrieved by the script is exactly the same).

My question…

Can someone with more javascript chops than me show me an adjustment to the code that would fix this problem?

I think a reasonable solution would be to generate a random integer, say between 0 & 200, and add that number to the 0.00X place of the latitude (and do the same for longitude). This would create a large enough shift to keep markers in the same city, but move them far enough apart to make them visible.

This looks like the place where the geocoding is done (line 75)…

// If an address column was specified, geocode the value in it.
  if (addressColumn && column == addressColumn) {
    var latlng = geocode(value);
    latlngColumn = latlngColumn.replace(/'/g, "\\\'");
    columns.push(latlngColumn);
    values.push(latlng);
  }

Thanks in advance,
Ryan

Answer 1

It seems better to put a number on the marker saying how many people chose that city/state. For one, your proposed solution will not adapt well to very small cities.

But anyway, this is how you’d do something like that:

var originalLongitude = /* from wherever */;
var originalLatitude = /* from wherever */;

var shiftedLongitude = originalLongitude + Math.random() * 0.002;
var shiftedLatitude = originalLatitude + Math.random() * 0.002;

Note that Math.random() produces a random number between 0 and 1.