JSFiddle - React, Tailwind, and code Playground

by Kyle Lam

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.20&amp;signed_in=true"></script>
    <div id="map-canvas"></div>

CSS

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

JavaScript

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

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


var addresses = null;
//alert(addresses);
if (addresses != null)
{
    var marker, x;
    var infowindow = new google.maps.InfoWindow();

    for (x = 0; x < addresses.length; x++) {
        //alert(addresses.length);
        //alert('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x]);
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {

            var p = data.results[0].geometry.location
            //alert(data.results[0].formatted_address);  // This will alert the individual addresses.

            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: data.results[0].formatted_address
            });

            // Add the markers to the gmarkers array.
            gmarkers.push(marker);  //<-------- No markers appear to be getting in here.
        });            
    }

    geoCodeAddress(map);
}