google map

%angular
<div id="map" style="height:500px;width:100%;"></div>
<script type="text/javascript">
function initMap() {
  var USA = {lat: 39.8282, lng: -98.5795};
  var map = new google.maps.Map(document.getElementById('map'), {zoom: 17, center: USA });
  
  var POIs = {};
  $.each(window.angularVars.data, function(i, v){
    POIs[v.values[0]] = v.values;
    
    //Create marker for each POI
    var pos = {lat: parseFloat(v.values[3]), lng: parseFloat(v.values[4]) };
    //var marker = new google.maps.Marker({position: pos, map: map});
    
    var circle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: pos,
      radius: 6.5
    });
    
    //Add click events for markers
    var infoContent = {content: '<b>ID</b>: ' + v.values[0] + '<p><b>GNIS ID:</b> ' + v.values[2] + '<p>' + v.values[1] };
    var info = new google.maps.InfoWindow(infoContent);
    circle.addListener('click', function(){
      info.open(map, circle);
      info.setPosition(circle.getCenter());
    });
  });
  
  //Draw lines from selected POI to node
  var POI = POIs[window.angularVars.id];
  var start = {lat: parseFloat(POI[3]), lng: parseFloat(POI[4])};
  var coords = [start];
  $.each(POI[8].split('|'), function(i, v){
    nextPOI = POIs[v]
    coords.push({lat: parseFloat(nextPOI[3]), lng: parseFloat(nextPOI[4])});
  });
  var path = new google.maps.Polyline({
      path: coords,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
  });
  path.setMap(map);
  map.setCenter(start);
}

//Only load GMaps once      
if (typeof google === 'object' && typeof google.maps === 'object') initMap();
else {
  var script = document.createElement("script");
  script.type = "text/javascript";
  //Replace with your API key
  script.src = "https://maps.googleapis.com/maps/api/js?key=FAKE_KEY&callback=initMap";
  document.body.appendChild(script);
}
</script>