demonstration for Google Maps API - Geocoding + Heatmap http://stackoverflow.com/questions/42863072/google-maps-api-geocoding-heatmap/42863805#42863072

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="floating-panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=visualization">
    </script>
  </body>

</html>

//set the scope of these variables so they can be used within 
// multiple functions
var map, heatmapData = [];
function initMap() {
  //assign value to map here
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -34.397,
      lng: 150.644
    }
  });
  var geocoder = new google.maps.Geocoder();
  geocodeAddress(geocoder, map);
}

function geocodeAddress(geocoder, resultsMap) {
  var listAddress = ["AB31", "AB38", "AB41", "AB42", "AB45"];
  /**
   * Simulate calling geocoder.geocode() with a callback function
   * after data has been loaded
   */
  var request = new XMLHttpRequest();
  request.open('GET', 'dataFile.json', true);
  request.onreadystatechange = function() {
    if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
      var data = JSON.parse(request.responseText);
      console.log('data: ',data);
      for (var index = 0; index < listAddress.length; ++index) {
        var address = data[index];
        console.log('address: ',address);
        heatmapData.push(new google.maps.LatLng(address.lat, address.lon))

        /*geocoder.geocode({
          'address': address
        }, function(results, status) {
          if (status === 'OK') {
            loc[0] = results[0].geometry.location.lat();
            loc[1] = results[0].geometry.location.lng();
            heatmapData.push(new google.maps.LatLng(loc[0], loc[1]))
            console.log(heatmapData);
          } else {
            console.log('Geocode was not successful for the following reason: ' + status);
          }
        });*/
        //heatmapData.push(new google.maps.LatLng(loc[0], loc[1]))
      }
      heatmap();
    }
  }
  request.send();
}

function heatmap() {
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData
  });
  //reference map - assigned value in initMap()
  heatmap.setMap(map);
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

demonstration for Google Maps API - Geocoding + Heatmap

http://stackoverflow.com/questions/42863072/google-maps-api-geocoding-heatmap/42863805#42863072

[{
  "lat": -34.5530492 , "lon":  150.58279319999997
}, {
  "lat": -34.5563143 , "lon":  150.63773390000006
}, {
  "lat": -34.533333 , "lon":  150.5
}, {
  "lat": -34.45 , "lon":  150.45000000000005
}, {
  "lat": -37.873 , "lon":  144.99299999999994}
  ]