JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="map">&nbsp;</div>

CSS

svg {
  border:0px solid #ebebeb;
}
.members, .members svg {
position: absolute;
}
 
.members svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}
.members circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}
#map {
  width: 960px;
  height: 700px;
  margin: 0;
  padding: 0;
}

JavaScript

var members = {"organizations":[{"member":{"field_category":"organization","body":"A network of organizations in Toronto devoted to climate change mitigation and adaptation.","URL":"tcan.ca","title":"Toronto Climate Action Network","field_lat":43.7,"field_long":-79.4}},{"member":{"field_category":"volunteer","body":"Rita Bijons is devoted to mitigating climate change and participates in many organizations.","URL":"","title":"Rita Bijons","field_lat":43.7,"field_long":-79.28}}]};

console.log(members.organizations);

function prettyAlert(p_message, p_title) {
  p_title = p_title || "";
  $(p_message).dialog({
       title: p_title,
       width:400,
       height:400,
       resizable: false,
       modal : true,
       overlay: { 
         backgroundColor: "#000", opacity: 0.5 
         },
       close: function(ev, ui) {
         $(this).remove(); 
         }
  });
}

var cx; var cy;
var width  = 1000;
var height = 800;

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map") .node(), {
    zoom: 11, 
    center: new google.maps.LatLng(43.7, -79.4),
    mapTypeId: google.maps.MapTypeId.TERRAIN // was ROADMAP
}
); // end new map
var myLatLng = new google.maps.LatLng(43.75, -79.4);
  var mymarker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
  
  mymarker.addListener('click',function () {
  	alert('teiya');
  });

var circles;
var imageAttributes = {height:32, width:32, x:-16, y:-16};
   //d3.json("http://localhost:8888/mydrupal/sites/default/d3_files/json/tcan-members.json?nocache=" + (new Date()).getTime(),function(error,members){
     var bottom = members.organizations.map(function(members) {
        return members.member;
      });
console.log(bottom);

  var overlay = new google.maps.OverlayView();
  // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes() .overlayMouseTarget)
        .append("div")
       ...