app.js

//
google.load('visualization', '1', { 'packages': ['corechart', 'table', 'geomap'] });

var FusionTableID = '1WFNhmPPyOFAkXZ0TmdFrSOQUlpvubquE2BN8jFXM';
var map;
var geocoder;
var infowindow;
var marker;

// Load the Google Geocoding API
// Called once the relevant library has loaded
function initAutocomplete() {
  var FusionTableID = '1WFNhmPPyOFAkXZ0TmdFrSOQUlpvubquE2BN8jFXM';
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  var waBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-13.4777777, 114.125977),
    new google.maps.LatLng(-36.258117, 129.385986)
  )

  autocomplete = new google.maps.places.Autocomplete((document.getElementById('address')),
    {
      types: ['geocode'],
      componentRestrictions: {
        country: 'aus'
      },
      bounds: waBounds
    });
  autocomplete.addListener('place_changed', function onPlaceChanged() {
    var place = autocomplete.getPlace();
    // If there was a geocode Error
    if (!place.geometry) {
      $("#address").innerHTML = "<p>Sorry, there was an error finding your address</p>";
    }

    var lat = place.geometry.location.lat();
    var long = place.geometry.location.lng();

    // Initialize our map
    var map = loadMap();

    console.log('ST_DISTANCE(latitude, LATLNG(' + lat + "," + long + "))")

    queryString = "https://www.googleapis.com/fusiontables/v2/query?sql="
      + encodeURI("SELECT * FROM 1P5bSnXkQsrnrfPIM6t3-5wXzgNeLP4Btm6tlbm9o ORDER BY ST_DISTANCE(latitude, LATLNG(" + lat + "," + long + ")) LIMIT 1")
      + "&key=AIzaSyCrSzAC1EuZkBK3ug8e6xcyAZh3wMRN38Q";

    $.getJSON(queryString, function(data) {
      var marker = new google.maps.Marker({
        position: {lat: data.rows[0][3], lng: data.rows[0][4]},
        map: map
      })
    })

    // Get the bounds to zoom to

  })
}

function zoomTo(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  var bounds = new google.maps.LatLngBounds();
  var numResults = 0;
  for (i = 0; i < numRows; i++) {
    if (!isNaN(parseFloat(response.getDataTable().getValue(i, 0))) && !isNaN(parseFloat(response.getDataTable().getValue(i, 1)))) {
      var point = new google.maps.LatLng(
        parseFloat(response.getDataTable().getValue(i, 0)),
        parseFloat(response.getDataTable().getValue(i, 1)));
      numResults++;
      bounds.extend(point);
    }
  }
  // alert("bounds =" +bounds)
  // zoom to the bounds
  if (numResults > 1) map.fitBounds(bounds);
  else if (numResults == 1) map.setCenter(point);
  else alert("no results");

}

function loadMap() {
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) });
  // create the map
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(-31.950527, 115.860457),
    mapTypeControl: false,
    scaleControl: true,
    scrollwheel: false,
    mapTypeControlOptions: false,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true,
    zoomControl: true,
    streetViewControl: false,
    styles: [{ "featureType": "road", "elementType": "geometry", "stylers": [{ "lightness": 100 }, { "visibility": "simplified" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "visibility": "on" }, { "color": "#C6E2FF" }] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [{ "color": "#C5E3BF" }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#D1D1B8" }] }]

  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  return map;
}


function showAddress(address) {
  var contentString = address + "<h3>Please search for an address within Western Australia</h3>";
  var address = document.getElementById('address').value;
  geocoder.geocode({ 'address': address }, function (results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      contentString += "<br>" + point;
      map.setCenter(point);
      map.setZoom(14);



      //set the callback function
      query.send(openInfoWindowOnMarker);



    } else {
      alert("There's been a problem geocoding your address – sorry about that! Please try again. " + status);
    }
  });
}



function openInfoWindowOnMarker(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;

  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var unionBounds = null;
  //  alert(numRows);
  for (var i = 0; i < numRows; i++) {
    var name = FTresponse.getDataTable().getValue(i, 0);
    var location = FTresponse.getDataTable().getValue(i, 1);
    var times = FTresponse.getDataTable().getValue(i, 2)

  }


  document.getElementById("name").innerHTML = name;
  document.getElementById("location").innerHTML = location;
  document.getElementById("times").innerHTML = times;



  google.maps.event.trigger(marker, 'click');
}

var placeSearch, autocomplete;

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic' rel='stylesheet' type='text/css'>
  <title>Find your pre-polling location</title>
  <style>
  #map_canvas {
      height: 600px;
      width: 800px;
      z-index: 0;
      position: absolute;
    }
  }
  </style>
  <link href="http://andrewburnsdev.nationbuilder.com/themes/1/5646c354ebad643db5000001/0/attachments/14474782711487303689/default/prepoll.css"
    rel="stylesheet" />

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div class="container">
    <input type="text" placeholder="Enter your full address" id="address" name="address" class="form-control">
    <div id="name"></div>
    <div id="location"></div>
    <div id="times"></div>
    <div id="map_canvas"></div>

  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://google.com/jsapi"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCT2ag4G0hjhPQ1ann-uUTuLo-h-wz62cU&libraries=places&callback=initAutocomplete"
    async defer></script>
  <script src="./app.js"></script>

</body>

</html>