Maps API v3 data layer and features

https://stackoverflow.com/questions/60855803

by upsidown

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
  height: 400px;
}

JavaScript

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-canvas"), 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,
        });
      }
    }
  });
}

initialize();