I'm trying to get google maps to work in my project ,but for some reason nothing shows up on the page when I try to search localhost/front to access that page .
master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laramap</title>
</meta>
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</link>
</head>
<body>
@yield('content')
<script crossorigin="anonymous" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4NNeHbNb1_nFhKnckNxMKpxXeQUecenM"
async defer></script>
<script src="={{asset('js/script.js')}}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
front.blade.php
@extends('layouts.master')
@section('content')
<div class="container">
<div id="map">
</div>
</div>
@endsection
script.js
$(document).ready(function () {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
});
main.css
#map{
heoght: 500px;
width: 600px;
margin: 0 auto;
}
web.php
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::any('/home', 'HomeController@index')->name('home');
Route::group(['as' => 'user.'],function () {
Route::get('/front',function () { return view('front');});
Route::get('/settings',['as'=> 'settings','uses'=> 'ProfileController@viewSettings']);
Route::post('/settings',['as'=> 'settings','uses'=> 'ProfileController@saveSettings']);
Route::any('/profile/{userId}',['as'=> 'profile','uses'=> 'ProfileController@viewProfile']);
});
