<!DOCTYPE html>
<html lang="en">


<?php $this->load->view("kepaladinas/header"); ?>

<body>

  <?php $this->load->view("kepaladinas/side_topbar"); ?>

  <div id="wrapper">
    <div class="main-content">
      
      <div class="row small-spacing">
        <div class="col-xs-12">
          <div class="box-content">
            <h4 class="box-title">Titik Lokasi Dinas</h4>

            <!-- /.dropdown js__dropdown -->
            <div class="form-group">
              <div id="map" style="width: 100%; height: 500px"></div>
            </div>
            <!-- /#flot-chart-1.flot-chart -->
          
          </div>
          <!-- /.box-content -->
        </div>
        <!-- /.col-xs-12 -->



      </div>
      
      <!-- /.row -->


      <?php $this->load->view('kepaladinas/footer') ?>

    </div>
    <!-- /.main-content -->
  </div>

 

  <?php $this->load->view('kepaladinas/scripts') ?>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7B9RynI4hQM_Y4BG9GYxsTLWwYkGASRo&libraries=geometry,drawing,places&v=weekly&region=ID&language=id">
  </script>
  <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7B9RynI4hQM_Y4BG9GYxsTLWwYkGASRo&&language=id&region=ID&callback=initAutocomplete&libraries=places&v=weekly&sensor=false" defer></script> -->
  <script>
    let map;
    async function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        zoom: 19.5,
        center: {
          lat: <?= $lat ?>,
          lng: <?= $lng ?>
        },
        mapTypeId: 'hybrid',
        streetViewControl: false,
      });

      const marker = new google.maps.Marker({
        position: {
          lat: <?= $lat ?>,
          lng: <?= $lng ?>
        },
        map: map,
        title: 'Center',
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      });

      const cityCircle = new google.maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.3,
        strokeWeight: 0.3,
        fillColor: "#FF0000",
        fillOpacity: 0.3,
        map,
        center: {
          lat: <?= $lat ?>,
          lng: <?= $lng ?>
        },
        radius: <?= $radius ?>,
      });
    }
    google.maps.event.addDomListener(window, 'load', initMap);
  </script>




</body>

<!-- Dibuat oleh Kicap Karan. https://www.kicap-karan.com -->

</html>