taufikmas

index.blade.php

Oct 3rd, 2018
138
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- INI CONTOH FILE VIEWS LARAVEL FOR GMAP -->
  2.  
  3. <!-- First, extends to the CRUDBooster Layout -->
  4. @extends('crudbooster::admin_template')
  5. @section('content')
  6. <div class="panel panel-primary">
  7.     <div class="panel-heading">
  8.         <h3 class="panel-title">PETA</h3>
  9.     </div>
  10.     <div class="panel-body">
  11.         <form action="" method="GET" role="form">
  12.             <div class="panel panel-primary">
  13.                 <div class="panel-heading" data-toggle="collapse" data-target="#filter">
  14.                     <h3 class="panel-title">Filter</h3>
  15.                 </div>
  16.                 <div class="panel-body collapse" id="filter">
  17.                     <div class="form-group">
  18.                         <label for="">User</label>
  19.                         <select name="user_id" id="input" class="form-control">
  20.                             <option>-- Pilih Surveyor</option>
  21.                             @foreach($user as $u)
  22.                             <option value="{{$u->id}}">{{$u->name}}</option>
  23.                             @endforeach
  24.                         </select>
  25.                     </div>
  26.                     @include('helper.indikator',['indikator'=>$all_indikator])
  27.                 </div>
  28.                 <div class="panel-footer">
  29.                     <button type="submit" class="btn btn-primary">Submit</button>
  30.                 </div>
  31.             </div>
  32.         </form>
  33.         <div class="row">
  34.             <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  35.                 <div id="map" style="height: 400px;width: 100%"></div> 
  36.             </div> 
  37.             <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  38.                 <div class="panel panel-success">
  39.                     <div class="panel-heading">
  40.                         <h3 class="panel-title">Summary</h3>
  41.                     </div>
  42.                     <div class="panel-body">
  43.                         <table class="table table-striped table-hover">
  44.                             <tbody>
  45.                                 <tr>
  46.                                     <th>Total</th>
  47.                                     <td>{{$all_data->count()}}</td>
  48.                                 </tr>
  49.                             </tbody>
  50.                         </table>
  51.                     </div>
  52.                 </div>
  53.             </div> 
  54.         </div>
  55.     </div>
  56. </div>
  57.  
  58.  
  59. @endsection
  60. @push('bottom')
  61. <script src="https://maps.googleapis.com/maps/api/js?key={{'YOUR API KEY'}}"></script>
  62. <script type="text/javascript" src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
  63. <script type="text/javascript">
  64.     var json_data = {!! json_encode($all_data) !!}
  65.     var map = new GMaps({
  66.         div: '#map',
  67.         lat:-6.979070,
  68.         lng:109.125100
  69.     });
  70.     $.each(json_data,function(index,value){
  71.         map.addMarker({
  72.             lat: value['lat'],
  73.             lng: value['long'],
  74.             title: 'Nama',
  75.             infoWindow: {
  76.                 content: '<p>'+value['nama']+'</p>'
  77.             },
  78.             icon:value['icon_map'],
  79.             animation: google.maps.Animation.DROP,
  80.             click: function(e) {
  81.                     // alert('You clicked in this marker');
  82.                 }
  83.             });
  84.     });
  85. </script>
  86. @endpush
RAW Paste Data