Google maps API v3.40 Data.StyleOptions interface -- Shape

Question

I'm trying to draw a circle around a marker in order to determine a boundary or area range. I need just a circle, there is no need for a polygon, with a point and radius it should be enough to draw it. What I want is exactly this:

I'm loading the map data with the function addGeoJson in this way (I attached an example of the server response at the end of the question just in case):

var promise = $.getJSON("http://localhost:8000/api/v1/targets/");
promise.then(function(data){
    map.data.addGeoJson(data,{idPropertyName:"id"});
});

As a result, I get this map where there is a mark for every point:

As I'm not manually iterating over each marker of my data, I would like to style them in a generic way. Looking for a way to change the marker style in google API reference I found that the DatasStyleOptions allows me to define the shape of the marker through the shape property which is a MarkerShape. So, I ended up trying this solution:

 map.data.setStyle(function(feature) {
        var geo = feature.getGeometry();
        //when it's a point
        if(geo.getType().toLowerCase()==='point'){  
         return {
             shape: {type: 'circle', coords: [geo.get().lat(), geo.get().lng(), parseFloat(feature.getProperty("radius"))]}
         };
        }
    });

The Shape object looks like this: {"type":"circle","coords":[30,30, 5000]}

The code above didn't make any change, the result still being the same, only markers were displayed on the map. I found a workaround for this but from my point of view, it is not the best way to deal with the problem and I don't understand why the solution described before is not working. Here is my current solution:

map.data.setStyle(function(feature) {
    var geo = feature.getGeometry();
    //when it's a point
    if(geo.getType().toLowerCase()==='point'){
        //create a circle
        feature.circle=new google.maps.Circle({map:map,
                                            center: geo.get(),
                                            radius: parseFloat(feature.getProperty("radius")),
                                            fillColor: '#f00',
                                            fillOpacity: 0.5,
                                            strokeWeight: 0});
        return {
            visible:true,
        };
    }
});

GeoJSON example:

{
    "type": "FeatureCollection",
    "features": [
        {
            "id": 1,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -101.25,
                    30.751277
                ]
            },
            "properties": {
                "user": 2,
                "title": "play station",
                "radius": "4500.00"
            }
        },
        {
            "id": 2,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -101.25,
                    50.751277
                ]
            },
            "properties": {
                "user": 2,
                "title": "Xbox 360",
                "radius": "6969.00"
            }
        },
        {
            "id": 3,
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -56.1,
                    -34.9011
                ]
            },
            "properties": {
                "user": 2,
                "title": "Nintendo",
                "radius": "5000.00"
            }
        }
    ]
}

user_1238965 · Answer

I'm trying to draw a circle around a marker in order to determine a boundary or area range.

You can add your data to the map, then iterate over your data and for each Point, add a Circle to the map, if a radius property exists. That's how I'd do it.

function initialize() {

  var myLatLng = new google.maps.LatLng(-34.9011, -56.1);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var fc = {
    "type": "FeatureCollection",
    "features": [{
        "id": 1,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -101.25,
            30.751277
          ]
        },
        "properties": {
          "user": 2,
          "title": "play station",
          "radius": "4500.00"
        }
      },
      {
        "id": 2,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -101.25,
            50.751277
          ]
        },
        "properties": {
          "user": 2,
          "title": "Xbox 360",
          "radius": "6969.00"
        }
      },
      {
        "id": 3,
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [
            -56.1,
            -34.9011
          ]
        },
        "properties": {
          "user": 2,
          "title": "Nintendo",
          "radius": "5000.00"
        }
      }
    ]
  };

  map.data.addGeoJson(fc);

  map.data.forEach(function(feature) {

    if (feature.getGeometry().getType() === 'Point') {

      var radius = parseFloat(feature.getProperty('radius'));

      if (radius) {

        new google.maps.Circle({
          map: map,
          center: feature.getGeometry().get(),
          radius: radius,
          fillColor: '#f00',
          fillOpacity: 0.5,
          strokeWeight: 0,
        });
      }
    }
  });
}

#map {
  height: 180px;
}

Google maps API v3.40 Data.StyleOptions interface --> Shape

1 Answers

JSFiddle demo