2017-06-22 144 views
0

我试图让Google地图在我的项目中工作,但由于某种原因,当我尝试搜索localhost/front访问该页面时,页面上什么也没有显示。地图不显示在Laravel

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', '[email protected]')->name('home'); 

Route::group(['as' => 'user.'],function() { 

    Route::get('/front',function() { return view('front');}); 
    Route::get('/settings',['as'=> 'settings','uses'=> '[email protected]']); 
    Route::post('/settings',['as'=> 'settings','uses'=> '[email protected]']); 
    Route::any('/profile/{userId}',['as'=> 'profile','uses'=> '[email protected]']); 

}); 

enter image description here

+0

变化'heoght的末尾添加&libraries=places:500像素;''要高度:500px' – Ohgodwhy

+0

不过我不要收回任何东西 – Russkiy

+0

你有没有得到任何Javascript错误?在控制台? –

回答

0

我不得不在关键

<script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyC4NNeHbNb1_nFhKnckNxMKpxXeQUecenM&libraries=places" async defer></script>