JSFiddle - React, Tailwind, and code Playground

by Michael Frans

HTML

<html>
<head>
<title>Google Maps API v3 : Fusion Tables Layer</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<div id="map" style="width: 530px; height:230px">
</div>
</body>
</html>

JavaScript

var lat = 37.4;
var lng = -122.1;
var tableid = '1mxcz4IDL1U7ItrqulVzt01fMasj5zsmBFUuQh6iM';
var meters = 10000;

 
function initialize() {

map = new google.maps.Map(document.getElementById('map'), {

center: -30,-120,

zoom:5

  });


function et_add_marker( marker_order, marker_lat, marker_lng, marker_description ){

marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 32, lng: -122}
  });


overlay = new google.maps.OverlayView({
	position: {lat: 32, lng: -122},
	content : marker_description,
	offset : {y:-42,x:-122}
 });

}




layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'geometry',
      	from: tableid,
    }
  });



layer.setMap(map);



google.maps.event.addListener(layer, 'click', function(event) {
    changeCenter(event);
  });



function changeCenter(event) {
  lat = event.latLng.lat();
  lng = event.latLng.lng();
  circle.setCenter(event.latLng);
}



circle = new google.maps.Circle({
    center: new google.maps.LatLng(lat, lng),
    radius: meters,
    map: map,
    fillOpacity: 0.2,
    strokeOpacity: 0.5,
    strokeWeight: 1,
  });


comboname = new google.maps.FusionTablesLayer({
	query: {
	select: 'name',
      	from: tableid,
	where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ',' + lng + '),' + meters + '))'
    }
  });


google.maps.event.addListener(layer, 'click', function(e) {
          // Change the content of the InfoWindow
	e.infoWindowHtml = comboname;
        });

}



google.maps.event.addDomListener(window, 'load', initialize);