How can I use Circles instead of markers with my Google Maps

Question

I created a gist to include my code more cleanly:

I am creating a basic app that shows a list of locations but instead of markers showing exact locations, I want to use circles with a radius of say 1000 meters. The goal is to add a slight bit of privacy to the locations. Text on the page would be something to the effect of: "circles on map reflect approximate location of other users". while privacy is not hyper critical, I don't want random people looking at the map and knowing the address of other users.

I am using two gems: Geocoder and Gmaps4rails. The geocoding works fine. The Markers work fine, but I can't figure out how to move to circles.

The gmaps4rails dev noted (Github page) that circles are possible, I am just unsure of what to change.

Thanks in advance for the help.

score 1 · Accepted Answer · edited May 23 '17 at 11:52

You basically just need to define an object with an SVG circular path and assign it to a marker's icon property. Here's a chunk of code from where I've done something like this. Note that you will need to play with the path definition and/or the scale property to get the results you want, but this demonstrates the overall recipe:

// Somewhere in your code you define an object you'll use as an icon.
// You only need to instantiate this once.
var circleIcon = {
    path: 'M 0, 0 m -10, 0 a 10, 10 0 1, 0 20, 0 a 10, 10 0 1, 0 -20, 0',
    fillColor: '#00FFFF',
    fillOpacity: 0.0,
    scale: 1,
    strokeColor: '#00FFFF',
    strokeWeight: 2,
    strokeOpacity: 0.8
};


// Then elsewhere in your code you can create markers like this.
// Many markers can reference the same icon object.
var latLng = new google.maps.LatLng(33.9958, -80.8896);

var circleMarker = new google.maps.Marker({
    icon: circleIcon
    position: latLng,
    map: map
});


// Optionally, you can use methods like these set marker properties.
//circleMarker.setPosition(latLng );
//circleMarker.setVisible(true);
//circleMarker.setMap(map);

On another note, with respect to preserving "a slight bit of privacy", it sounds like the center of your circle still represents the user's true position. So you might want to consider introducing some subtle, random offsets to the LatLng coordinates coming out of your geocoder. Based on a quick review of decimal degrees, fluctuations of +/- 0.001 to 0.009 in both the Latitude and Longitude values should give you some slosh of about 100 to 1000 meters, which might be sufficient for your purposes. If I were doing this, I'd probably look at some sample points and compare their true position to their "randomly offset" position before I went live with it though, mostly just to give it a reality check.

BTW, here's [a deeper dive into decimal degrees](http://gis.stackexchange.com/questions/8650/how-to-measure-the-accuracy-of-latitude-and-longitude) you might want to consider. — elrobis, Apr 02 '14 at 16:18
Many thanks. This all makes sense to me except the LatLng var. If I have 10 locations do I just run a loop in ruby to create 10 vars? then reference them somehow in the CircleMarker? thank you. — TJ Sherrill, Apr 02 '14 at 23:30
@TJSherrill, what I showed above is JavaScript, which belongs in the client. The LatLng object is a Google Maps API class. Without knowing your site design, I think you need to provide an array of lat long pairs to your client layer and assemble your LatLng objects there. Confession: I know C# and Php but not Ruby design, but it seems like it should be trivial to use server-side Ruby to supply your client-side JavaScript with the coordinate values. — elrobis, Apr 03 '14 at 13:33

How can I use Circles instead of markers with my Google Maps

1 Answers1