index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>City Watch</title>
    <meta name="description" content="City Watch">
    <meta name="author" content="geniuses">
    <style>    

    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
        height: 100%;
        width: 50%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
    <link rel="stylesheet" href="index.css">
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
    <div id="map"></div>
    <script>
      var map;

      function initMap() {
        var seattleCenter = {
          lng: -122.34568058,
          lat: 47.6233863
        }
        
        map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: seattleCenter.lat, 
            lng: seattleCenter.lng},
          zoom: 13
        });

        map.data.loadGeoJson('testdata/testdata.json');

        map.data.setStyle(function(feature) {
          var type = feature.getProperty('type'); 
          var subType = feature.getProperty('subType'); 
          var color; 
          var geo = feature.getGeometry(); 

          switch(type) {
            case "CRIME": 
              color = "red";  
               feature.circle = new google.maps.Circle({
                  map: map,
                  center: geo.b[0], 
                  radius: 50,
                  fillColor: '#FF0000',
                  fillOpacity: 0.4,
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.4,
                  strokeWeight: 1             
               });          
              break; 
            case "MARIANNE":
              color = "blue"; 
               feature.circle = new google.maps.Circle({
                  map: map,
                  center: geo.b[0], 
                  radius: 50,
                  fillColor: '#FF0000',
                  fillOpacity: 0.4,
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.4,
                  strokeWeight: 1             
               });    
              break; 
            default:
              color = "black"; 
              break; 
          }

          return {
            fillColor: color, 
            strokeWeight: 1
          };  

        }); 


      }


    </script>
    <script src="index.js"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCaM_6h03Fs34GV7c8jonME5B3dAk3AYY&callback=initMap">
    </script>
</body>

</html>