@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Google Maps
            <small>Easy usage directly from data attribute</small>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card card-default">
                <div class="card-header">Classic Map</div>
                <div class="card-body">
                    <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card card-default">
                <div class="card-header">Custom zoom</div>
                <div class="card-body">
                    <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-zoom="19"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card card-default">
                <div class="card-header">Different Map Type</div>
                <div class="card-body">
                    <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-maptype="SATELLITE"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card card-default">
                <div class="card-header">Multiple Addresses</div>
                <div class="card-body">
                    <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867; 376 N TUSTIN ST, ORANGE, CA 92867" data-title="Location 1; Location 2"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-default">
                <div class="card-header">Styled Maps</div>
                <div class="card-body">
                    <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-maptype="ROADMAP" data-styled="data-styled"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <!-- GOOGLE MAPS -->
    <script src="//maps.google.com/maps/api/js"></script>
    <script src="{{ mix('/js/gmap.js') }}"></script>
@endsection