JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

function initialize() {
  var resultJson = [{
    postcode: "AB10 1",
    info: "AB10 1 - info"
  }, {
    postcode: "WC2N 5DU",
    info: "WC2N 5DU - info"

  }];
  var result = JSON.stringify(resultJson);
  var apartments = jQuery.parseJSON(result);
  //console.log(array);

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(53.408371, -2.991573),
    zoom: 5
  });
  var infowindow = new google.maps.InfoWindow();

  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {

    for (var i = 0; i < apartments.length; ++i) {
      geocodeAddress(apartments[i], infowindow, map);
    }

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

function geocodeAddress(address, infowindow, map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: address.postcode + ' UK',
  }, function(result, status) {
    if (status == 'OK' && result.length > 0) {

      var marker = new google.maps.Marker({
        position: result[0].geometry.location,
        map: map,
      });

      google.maps.event.addListener(marker, 'click', function() {
        var content = (address.info);

        infowindow.setContent(content);
        infowindow.open(map, this);
      });
    } else {
      alert("geocoder returns status:" + status)
    }
  });

}