JSFiddle - React, Tailwind, and code Playground

by cibanezvaldes

HTML

<meta charset="utf-8">
<title>Un pequeño Mapa de chile</title>
</head>
<body>
  <h1>Ubicacion de Cajeros automaticos</h1>
<p>Mapa de chile y su ubicacion de cajeros automaticos</p>
<form name="form1">
  <body>

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTW-8Va1yPgLBpJgU9VDZn175Z7bHkpeJUYwZkyuwJsmJgLdSacIIPuhKafuexUdEkD5nHYzOxpU1g9/pubhtml?gid=1800700045&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

</body>

</html>    
      <br><br>
    </form>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.stations, .stations svg {
  position: absolute;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: brown;
  stroke: black;
  stroke-width: 1.5px;
}

</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

// Crear el mapa de Google…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(-33.4372, -70.6506),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

// Carga los datos de la estación. Cuando los datos regresan, crea una superposición.
d3.json("stations.json", function(error, data) {
  if (error) throw error;

  var overlay = new google.maps.OverlayView();

  // Agregar el contenedor cuando la superposición se agrega al mapa.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "stations");

    // Dibuja cada marcador como un elemento SVG separado.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;

      var marker = layer.selectAll("svg")
          .data(d3.entries(data))
          .each(transform) // actualizar los...