<div id="map"></div>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script>

      var infowindow = null;
      var map = null;
      var markerclusterer = null;
      var markers = [];
      var mcOptions = {styles: [{
                    height: 56,
                    url: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m1.png",
                    width: 55
                    },
                    {
                    height: 56,
                    url: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.png",
                    width: 55
                    },
                    {
                    height: 56,
                    url: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m3.png",
                    width: 55
                    },
                    {
                    height: 56,
                    url: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m4.png",
                    width: 55
                    },
                    {
                    height: 56,
                    url: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m5.png",
                    width: 55
                    }],
                    gridSize: 50,
                    maxZoom: 15
                  }

      function initMap() {
        var mapDiv = document.getElementById('map');
        map = new google.maps.Map(mapDiv, {
            center: {lat: 55.298478, lng: 23.9130441},
            zoom: 7,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false
        });


        var markerCluster = new MarkerClusterer(map, markers, mcOptions);
        infowindow = new google.maps.InfoWindow({
          content: "holding..."
          });
        jQuery(document).ready(function(){
            var clinics = [
                {
                    "address" : "Kaunas",
                    "name" : "pirma",
                    "phone" : "111",
                    "permalink" : "http://json.org/example.html",
                    "web" : "http://json.org/example.html",
                    "thumb" : "http://odontologija.tit.lt/wp-content/themes/odontologas/img/default-thumbnail.png"
                },
                {
                    "address" : "Vilnius",
                    "name" : "antra",
                    "phone" : "222",
                    "permalink" : "http://json.org/example.html",
                    "web" : "http://json.org/example.html",
                    "thumb" : "http://odontologija.tit.lt/wp-content/themes/odontologas/img/default-thumbnail.png"
                }
            ];

            var clinicNumber = 0;
            // var addresses = ['Kaunas', 'Vilnius', 'Palanga','Klaipeda','Siauliai'];

             for (var x = 0; x < clinics.length; x++) {
               jQuery.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+clinics[x].address+'&sensor=false', null, function (data) {
clinicNumber++;
                    console.log(clinics);
                    var p = data.results[0].geometry.location;
                    var marker = new google.maps.Marker({
                        position: p,
                        map: map,
                        html: `<div class="map-klinika">
                          <div class="col-md-3 map-img"><img src="<?php echo get_template_directory_uri(); ?>/img/default-thumbnail.png"></div>
                          <div class="col-md-9">
                              <div class="map-klinika-header">`+clinics[clinicNumber].name+`</div>
                              <div class="map-klinika-adresas">Adreso g. 56, Kaunas</div>
                              <div class="map-email"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/email-icon.png">EL. PAŠTAS</a></div>
                              <div class="map-web"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/web-icon.png">TINKLALAPIS</a></div>
                              <div class="map-phone">86112113321</div>
                          </div>
                  </div>`
                    });
                    markers.push(marker);
                    markerCluster.addMarker(marker);
                    google.maps.event.addListener(marker, 'click', function () {
                    // where I have added .html to the marker object.
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                    });
                });

            }

        }); // jquery



        // var markers = locations.map(function(location, i) {
        //   return new google.maps.Marker({
        //     position: location,
        //     html: `<div class="map-klinika">
        //                   <div class="col-md-3 map-img"><img src="<?php echo get_template_directory_uri(); ?>/img/default-thumbnail.png"></div>
        //                   <div class="col-md-9">
        //                       <div class="map-klinika-header">Pavadinimas</div>
        //                       <div class="map-klinika-adresas">Adreso g. 56, Kaunas</div>
        //                       <div class="map-email"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/email-icon.png">EL. PAŠTAS</a></div>
        //                       <div class="map-web"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/img/web-icon.png">TINKLALAPIS</a></div>
        //                       <div class="map-phone">86112113321</div>
        //                   </div>
        //           </div>`
        //     // icon: image
        //   });
        // });

        // for (var i = 0; i < markers.length; i++) {
        //         var marker = markers[i];
        //         google.maps.event.addListener(marker, 'click', function () {
        //         // where I have added .html to the marker object.
        //         infowindow.setContent(this.html);
        //         infowindow.open(map, this);
        //         });
        //     }

        // {imagePath: "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2"}


      }
    </script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtLyzDbRGyg_FibPybiKOQwUyxRvJlSFc&callback=initMap"
    async defer></script>