  <div class="content-wrapper">
    <div class="container">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1>
          Mapping
        </h1>
      </section>

      <!-- Main content -->
      <section class="content">
       <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Reservasi</h3>
          </div>
          <div class="box-body">
          <form method="post" action="<?= base_url('snap/simpan_reservasi'); ?>">
          <div class="row">
            <div class="col-md-5">
              <div class="form-group">
                <label>Tanggal Masuk:</label>
                <input type="Date" name='tglin' class="form-control pull-right" id="reservation" required>
              </div>
              </div>
            <div class="col-md-5">
              <div class="form-group">
                <label>Tanggal Keluar:</label>
                <input type="Date" name='tglout' class="form-control pull-right" id="reservation" required>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <label>~</label>
                <button type="submit" name="kirim" class="form-control pull-right" >Reservasi</button>
              </div>
            </div>
            </div>
            </form>
          </div>
          <!-- /.box-body -->
        </div>
       <div class="box box-default">
          <div class="box-header with-border">
            <h3 class="box-title">Mapping Area Camping</h3>
          </div>
          <div class="box-body">
          <div id='printoutPanel'></div>
          
          <div id='myMap' style='position:relative;width:100%;height:700px;'></div>

          </div>
          <!-- /.box-body -->
        </div>

        
        <!-- /.box -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.container -->
  </div>
  <script type='text/javascript'>
    var map, infobox;

    function GetMap() {
        
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        /* No need to set credentials if already passed in URL */
        center: new Microsoft.Maps.Location(-7.679388, 112.598252),
        mapTypeId: Microsoft.Maps.MapTypeId.aerial,
        zoom: 20
    });

        infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
            visible: false
        });

        //Assign the infobox to a map instance.
        infobox.setMap(map);

        //Create random locations in the map bounds.
        <?php
         $query_str="SELECT * FROM `area_camping`";
             $query=$this->db->query($query_str);
                 foreach ($query->result_array() as $row){
            $link ="$row[blok] <br> <a href='detail_area/$row[id_area]'>Detail</a>";
         ?>
            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(<?=$row['latlng']?>), {text: "<?=$row['blok']?>"});

            pin.metadata = {
                title: "<?=$row['blok']?>",
                description: "<?=$link?>"
            };

            //Add a click event handler to the pushpin.
            Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);

            //Add pushpin to the map.
            map.entities.push(pin);
               
         <?php }  ?> 
    }

    function pushpinClicked(e) {
        //Make sure the infobox has metadata to display.
        if (e.target.metadata) {
            //Set the infobox options with the metadata of the pushpin.
            infobox.setOptions({
                location: e.target.getLocation(),
                title: e.target.metadata.title,
                description: e.target.metadata.description,
                visible: true
            });
        }
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=U4VD6Xi1NuVkAaN8KvJF~dereRmfzkm5VdVorK5lmlA~Ar4MuDpGzRmqdUtbXYvjm31t06tAU-400GnsVAY8Zna23hb05WjeiHiszdHOEAXU' async defer></script>