<style>
  .map-container-9,
  .map-container-10,
  .map-container-11 {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
  }

  .map-container-9 iframe,
  .map-container-10 iframe,
  .map-container-11 iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  #map{
        position: initial !IMPORTANT;
    }

</style>

<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-4 d-flex flex-row justify-content-between">
        <h1 class="m-0 text-dark">Geofence
        </h1>
      </div>
    </div>
  </div>
</div>
<section class="content">
  <div class="container-fluid">
    <!--Google map-->
    <div id="map-container-google-16" class="z-depth-1-half map-container-9" style="height: 400px">
    <div id="map"  style="position: initial !important;overflow: hidden;"></div>                       

    </div>
  </div>
</section>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSW22XgtNdyjJGUq3QeXAjwBT6tFP51tk&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
   var users = <?php echo json_encode($tati); ?>;
   console.log(users);


   function initMap() {
      // const map = new google.maps.Map(document.getElementById("map"), {
      //   center: { lat: -34.397, lng: 150.644 },
      //   zoom: 8,
      // });
      var locations = users;
      /* var locations = [
  ['<b>Name 1</b><br>Address Line 1<br>Bismarck, ND 58501<br>Phone: 701-555-1234<br><a href="#" >Link<a> of some sort.', 46.8133, -100.7790, 4],
  ['<b>Name 2</b><br>Address Line 1<br>Fargo, ND 58103<br>Phone: 701-555-4321<br><a href="#" target="_blank">Link<a> of some sort.', 46.8772, -96.7894, 5]
];*/

      var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 7,
         /* Zoom level of your map */
         center: new google.maps.LatLng(33.67253360017613, 72.99672263429596),
         /* coordinates for the center of your map */
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

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

      var marker, i;

      for (i = 0; i < locations.length; i++) {
         marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
           // icon: 'https://cdn-icons-png.flaticon.com/32/75/75689.png'
         });

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
               infowindow.setContent(locations[i][0]);
               infowindow.open(map, marker);
            }
         })(marker, i));
      }
   }
   window.initMap = initMap;
</script>
