Tutorial laravel gmaps basic map using gmaps.js

Fresh install laravel 5.3

 I am using command laravel new "app_name". laravel new gmaps, for my tutorial.

Add reference google map API

<script src="http://maps.google.com/maps/api/js"></script>

Add reference gmaps.js.

i put file on js folder.

<script src="{{asset('js/gmaps.js')}}"></script>

Create view for gmaps

For center of map. I am using latlong.net to get lat long of place.

@extends('layouts.app')
@section('content')
<style type="text/css">
  #map {
    width: 100%;
    height: 400px;
  }
</style>
<div class="container">
<div id="map"></div>
</div>
@endsection
@section('script')
<script src="http://maps.google.com/maps/api/js?key=API-KEY"></script>
<script src="{{asset('js/gmaps.js')}}"></script>
<script>
  var map = new GMaps({
    el: '#map',
    lat: -6.879704,
    lng: 109.125592
  });
</script>
@endsection

 If you not register API-KEY.

You can generate api-key with google maps developer. see this link

Generate api key.

Create route for this view

Route::get('/basic-map',function(){
return view('basic-map');
}); 

Here we go. Lets check our project. Go to command prompt. php artisan serve.
Open localhost:8000/basic-map

Ok, next time, I will create:

Map Event

Marker

Geolocation

Geocoding

Please stay tune in my blog. thanks.