JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var map;
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(53.382971, -1.4702737),
        mapTypeId: 'roadmap',
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        zoomControl: false
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ["S1 4EJ", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"],
        ["S1 4QW", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"],
        ["S1 2HE", "Let Agreed", "http://maps.google.com/mapfiles/ms/icons/blue.png"]
    ];

    for (var i = 0; i < addresses.length; i++) {
        console.log(i);

        var image = addresses[i][2];

        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i][0] + '&sensor=false', null, (function (i, image) {
            return function (data) {
                var p = data.results[0].geometry.location;
                var latlng = new google.maps.LatLng(p.lat, p.lng);

                console.log(i);

                new google.maps.Marker({
                    position: latlng,
                    map: map,
                    icon: {
                        url: image,
                        size: new google.maps.Size(50, 50),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(25, 50)
                    }
                });

            }
        })(i, image));
    }

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