D3 + leaflet + GForm

<!DOCTYPE HTML>

<html>

<body>

<div id="map"></div>
	<div id="tooltip">
		<p><span id="headline">CLICK TO START</span></p>
		<p><span id="location"></span></p>
		<p><span id="time"></span></p>
	</div>

//------Leaflet------
	var map = L.map('map').setView([4.711245, -74.069368], 11);

L.tileLayer('https://api.mapbox.com/styles/v1/federicopvs/cinweuph60029b4npbawfzlc7/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZmVkZXJpY29wdnMiLCJhIjoiY2lsZ3JqdXgxMDA0MHdnbTRzYjJkaWplZiJ9.P_8XuqQUogZRfBqwXnXF8g', {
    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    minZoom: 11,
    id: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
	}).addTo(map);

//------D3------
	var dataset;

/// Initialize the SVG layer
    map._initPathRoot()

// We pick up the SVG from the map object
    var svg = d3.select("#map").select("svg"),
    g = svg.append("g");

function drawCircles (d) {
		circle = g.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.style("stroke", "black")
			.style("fill", fillColor)
			.style("fill-opacity", 0.7)
			.attr("r", 20)
			.attr("cx", -20)
			.attr("cy", -20);
	}

function fillColor (d) {
		if (d.color=="red") {return "red";}
		else if (d.color=="blue") {return "blue";}
		else if (d.color=="yellow") {return "yellow";}
	}

function update () {
		circle.attr("transform", function (d) {
			return "translate("+
				map.latLngToLayerPoint(d.LatLng).x +","+ 
                map.latLngToLayerPoint(d.LatLng).y +")";
		})

}

function interactivity () {
		circle.on("mouseover", function () {
			d3.select(this)
			.transition()
			.duration(500)
			.style("fill-opacity", 1)
			.attr("r", 25)
			.ease("elastic")
		})

circle.on("mouseout", function () {
			d3.select(this)
			.transition()
			.duration(500)
			.style("fill-opacity", 0.7)
			.attr("r", 20)
			.ease("elastic")
		})

circle.on("click", function (d) {
			d3.select(this)
			d3.select("#tooltip")
				.select("#headline")
				.text(d.displayName)
			d3.select("#tooltip")
				.select("#location")
				.text(d.formattedAddress)
			d3.select("#tooltip")
				.select("#time")
				.text(d.Timestamp)
		})

d3.select("#headline").on("click", function () {
			update();
			d3.select("#headline").text('Click on a circle to visualize more information.')
		})
	}

//------Google Maps JavaScript API------
	var geocoder = new google.maps.Geocoder();

// Concatenate location info
  	function findLocation () {
    dataset.forEach(function (d, index) {
    	d.fullAddress = d.street+" "+d.number+", "+d.city+", Colombia";
    	var fullAddress = d.fullAddress;
    	getCoordinates(d, index, fullAddress);
  	})
	}

//------Tabletop------
	window.onload = function() { init() };
	var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1N6FXNLNQyJUhI27-j6uhuVyEgRKm3UOrGsDfY9V_T5w/pubhtml';

function init() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     simpleSheet: true } )
  	}

function showInfo(data, tabletop) {
    console.log(data);
    dataset=data;

findLocation();
    drawCircles();
	map.on("viewreset", update);
 	interactivity();
  	}

</script>

</body>

</html>

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

Updated missing url https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&language=es®ion=CO to https://maps.googleapis.com/maps/api/js?key=[your_api_key]&language=es®ion=co

https://d3js.org/d3.v3.min.js

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js

https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&language=es®ion=CO