JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map" style="width: 100%; height: 100%; position: absolute;"></div>

JavaScript

(function() {
  window.onload = function() {
    // Creating an object literal containing the properties we want to pass to the map
    var address = [
      'Atlanta, GA',
      '1400 River Place Ste 300, Braselton, GA 30517',
      'Gainesville, GA',
      'Dawsonville, GA'

    ];
    var options = {
      // zoom: 10,
      //center: new google.maps.LatLng(52.40, -3.61),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true
    };
    // Creating the map
    var map = new google.maps.Map(document.getElementById('map'), options);
    // Creating a LatLngBounds object
    var bounds = new google.maps.LatLngBounds();
    // Creating an array that will contain the addresses
    var places = [];
    // Creating a variable that will hold the InfoWindow object
    var infowindow;
    // markerclusterer
    var markerCluster = new MarkerClusterer(map, markers, {
      gridSize: 30,
      styles: [{

        url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
        width: 53,
        height: 53,
        textSize: 15,
        textColor: "white"
      }]
    });


    var geocoder = new google.maps.Geocoder();
    var markers = [];
    // Adding a LatLng object for each city
    for (var i = 0; i < address.length; i++) {
      (function(i) {
        geocoder.geocode({
          'address': address[i]
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            places[i] = results[0].geometry.location;
            // Adding the markers
            var marker = new google.maps.Marker({
              position: places[i]
            });
            markers.push(marker);
            //add the marker to the markerClusterer
            markerCluster.addMarker(marker);
            // Creating the event listener. It now has access to the values of i and marker as they were during its creation
            google.maps.event.addListener(marker, 'click', function() {
              // Check to see if...