index.blade.php

<!-- INI CONTOH FILE VIEWS LARAVEL FOR GMAP -->

<!-- First, extends to the CRUDBooster Layout -->
@extends('crudbooster::admin_template')
@section('content')
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">PETA</h3>
    </div>
    <div class="panel-body">
        <form action="" method="GET" role="form">
            <div class="panel panel-primary">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter">
                    <h3 class="panel-title">Filter</h3>
                </div>
                <div class="panel-body collapse" id="filter">
                    <div class="form-group">
                        <label for="">User</label>
                        <select name="user_id" id="input" class="form-control">
                            <option>-- Pilih Surveyor</option>
                            @foreach($user as $u)
                            <option value="{{$u->id}}">{{$u->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    @include('helper.indikator',['indikator'=>$all_indikator])
                </div>
                <div class="panel-footer">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div id="map" style="height: 400px;width: 100%"></div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">Summary</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped table-hover">
                            <tbody>
                                <tr>
                                    <th>Total</th>
                                    <td>{{$all_data->count()}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('bottom')
<script src="https://maps.googleapis.com/maps/api/js?key={{'YOUR API KEY'}}"></script>
<script type="text/javascript" src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script type="text/javascript">
    var json_data = {!! json_encode($all_data) !!}
    var map = new GMaps({
        div: '#map',
        lat:-6.979070,
        lng:109.125100
    });
    $.each(json_data,function(index,value){
        map.addMarker({
            lat: value['lat'],
            lng: value['long'],
            title: 'Nama',
            infoWindow: {
                content: '<p>'+value['nama']+'</p>'
            },
            icon:value['icon_map'],
            animation: google.maps.Animation.DROP,
            click: function(e) {
                    // alert('You clicked in this marker');
                }
            });
    });
</script>
@endpush