PHP detailMap + Direction

Konsep CI:
pada bagian controller/index.php


public function detail_info($modul,$id){
if($modul == "wisata"){
$this->db->join('pengelola','wisata.id_pengelola=pengelola.id_pengelola');
$this->db->join('kota','wisata.id_kota=kota.id_kota');
$this->db->join('jenis_wisata','wisata.id_jenis_wisata=jenis_wisata.id_jenis_wisata');
$data ['wisata']=$this->db->get_where('wisata',array ('id_wisata'=>$id))-> row();
}

               $data ['awisata']=$this->db->get('wisata');
$data ['ahiburan']=$this->db->get('hiburan');
$data ['atm']=$this->db->get('tempat_makan');
$data ['apenginapan']=$this->db->get('penginapan');
$data ['alayanan']=$this->db->get('layanan');

$this->load->view('user/info_detail',$data);

+++++++++++++

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>

<?php $this->load->view('user/header') ?>
<div class="inner_banner_agile">

</div>
<!--//banner -->
<!-- short -->
<div class="services-breadcrumb">
<div class="inner_breadcrumb">
<ul class="short_ls">
<li>
<a href="index.html">Home</a>
<span>/ /</span>
</li>
<li>Info Detail</li>
</ul>
</div>
</div>

<?php
$i=0;
foreach($awisata -> result() as $a){
$telp=$a->telepon;
$nama=$a->nama_tempat_wisata;
$alamat=$a->alamat;
$lat=$a->latitude;
$lon=$a->longitude;
$arN[$i]=$nama;
$arA[$i]=$alamat;
$arLat[$i]=$lat;
$arLon[$i]=$lon;
$i++;
}
foreach($ahiburan -> result() as $a){
$telp=$a->telepon;
$nama=$a->nama_hiburan;
$alamat=$a->alamat;
$lat=$a->latitude;
$lon=$a->longitude;
$arN[$i]=$nama;
$arA[$i]=$alamat;
$arLat[$i]=$lat;
$arLon[$i]=$lon;
$i++;
}
foreach($atm -> result() as $a){
$telp=$a->telepon;
$nama=$a->nama_tempat_makan;
$alamat=$a->alamat;
$lat=$a->latitude;
$lon=$a->longitude;
$arN[$i]=$nama;
$arA[$i]=$alamat;
$arLat[$i]=$lat;
$arLon[$i]=$lon;
$i++;
}
foreach($apenginapan -> result() as $a){
$telp=$a->telepon;
$nama=$a->nama_penginapan;
$alamat=$a->alamat;
$lat=$a->latitude;
$lon=$a->longitude;
$arN[$i]=$nama;
$arA[$i]=$alamat;
$arLat[$i]=$lat;
$arLon[$i]=$lon;
$i++;
}
foreach($alayanan -> result() as $a){
$telp=$a->telepon;
$nama=$a->nama_tempat_layanan;
$alamat=$a->alamat;
$lat=$a->latitude;
$lon=$a->longitude;
$arN[$i]=$nama;
$arA[$i]=$alamat;
$arLat[$i]=$lat;
$arLon[$i]=$lon;
$i++;
}


if(isset($wisata)){
$lat=$wisata->latitude;
$lon=$wisata->longitude;
$nama=$wisata->nama_tempat_wisata;
$alamat=$wisata->alamat;
$jenis="Wisata";
$icon="images/icon1.png";
$kota=$wisata->nama_kota;
$telepon=$wisata->telepon;
$gambar=base_url("assets/uploads/files/".$wisata -> gambar);
}
elseif(isset($hiburan)){
$lat=$hiburan->latitude;
$lon=$hiburan->longitude;
$nama=$hiburan->nama_hiburan;
$alamat=$hiburan->alamat;
$jenis="Hiburan";
$icon="images/icon2.png";
$kota=$hiburan->nama_kota;
$telepon=$hiburan->telepon;
$gambar=base_url("assets/uploads/files/".$hiburan -> gambar);
}
elseif(isset($tm)){
$lat=$tm->latitude;
$lon=$tm->longitude;
$nama=$tm->nama_tempat_makan;
$alamat=$tm->alamat;
$jenis="Tempat Makan";
$icon="images/icon2.png";
$kota=$tm->nama_kota;
$telepon=$tm->telepon;
$gambar=base_url("assets/uploads/files/".$tm -> gambar);
}
elseif(isset($penginapan)){
$lat=$penginapan->latitude;
$lon=$penginapan->longitude;
$nama=$penginapan->nama_penginapan;
$alamat=$penginapan->alamat;
$jenis="Penginapan";
$icon="images/icon2.png";
$kota=$penginapan->nama_kota;
$telepon=$penginapan->telepon;
$gambar=base_url("assets/uploads/files/".$penginapan -> gambar);
}
elseif(isset($layanan)){
$lat=$layanan->latitude;
$lon=$layanan->longitude;
$nama=$layanan->nama_tempat_layanan;
$alamat=$layanan->alamat;
$jenis="Layanan";
$icon="images/icon2.png";
$kota=$layanan->nama_kota;
$telepon=$layanan->telepon;
$gambar=base_url("assets/uploads/files/".$layanan -> gambar);
}
?>


<div class="welcome" id="about">
<div class="container">
<h3 class="title">Info</h3>
<div class="col-md-9">
<h3> Lokasi </h3><br>

<div id="floating-panel">
    <b>Start: </b>
   <select id="start" readonly="1">
<?php
echo"<option value='".$alamat."'>".$nama."</option>";
?>
</select>
    <b>End: </b>
<select id="end">
<?php
for($j=0;$j<$i;$j++){
if($nama==$arN[$j]){}
else{
echo"<option value='".$arA[$j]."'>".$arN[$j]."</option>";
}
}
?>
</select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,center: {lat: <?php echo $lat;?>, lng: <?php echo $lon;?>}
        });
        directionsDisplay.setMap(map);


var marker= new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $lon;?>),
map: map,icon: '<?php echo $icon;?>'
});
marker.setTitle("<?php echo $nama."-".$alamat;?>");
attachSecretMessage(marker, "<?php echo $nama."-".$alamat;?>");

 
        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }

  function attachSecretMessage(marker, pesan) {
  var infowindow = new google.maps.InfoWindow(
  { content: pesan,size: new google.maps.Size(50,50)
  });
  google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);
  });
}

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
     <script async defer
    src="http://maps.google.com/maps/api/js?key=AIzaSyB0SZKfq2Ja2xn9XNkeApth9kHjwOimjlE&callback=initMap">
    </script>




<table class="table">
<tr>
<th>Nama</th>
<td><?php echo $nama;?></td>
</tr>
<tr>
<th>Jenis</th>
<td><?php echo $jenis;?></td>
</tr>
<tr>
<th>Kabupaten/Kota</th>
<td><?php echo $kota;?></td>
</tr>
<tr>
<th>Alamat</th>
<td><label id="start2"><?php echo $alamat;?></label></td>
</tr>
</table>
</div>
<div class="col-md-3">
<h3>Gambar</h3><br>
<img src="<?php echo $gambar; ?>" alt="Beauty" class="img-responsive">

<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>



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