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>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

CSS

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

JavaScript

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 49.7437895,
      lng: 15.3360726
    }
  });
  //array
  var infoUser = [
    ['Germany', 'Maj', 'TUC', '20', '300'],
    ['Czech Republic', 'admin', 'Bla', '50', '400'],
    ['Italy', 'HOOOO', 'BUC', '1', '50'],
    ['Italy', 'aaaaa', 'aaa', '10', '20'],
    ['Germany', 'adminek', 'hopinek', '50', '1000']
  ];

  var infoWindow = new google.maps.InfoWindow();

  var markerCluster = new MarkerClusterer(map, markers, {
    maxZoom: 18,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  var markers = [];

  for (var x = 0; x < infoUser.length; x++) {

    var adresa = infoUser[x][0],
      name = infoUser[x][1],
      firstname = infoUser[x][2],
      age = infoUser[x][3],
      price = infoUser[x][4];

    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + adresa, null, function(adresa, name) {
      return function(data) {
        var p = data.results[0].geometry.location;
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({
          position: latlng,
          title: adresa,
          map: map
        });
        markers.push(marker);
        markerCluster.addMarker(marker);

        var content = 'Adresa: ' + adresa + '<br>username: ' + name;

        google.maps.event.addListener(marker, 'click', (function(marker, content, infoWindow) {
          return function() {
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
          };
        })(marker, content, infoWindow));
      }
    }(adresa, name));
  }
}
google.maps.event.addDomListener(window, "load", initMap);