google map api v3 не загружается на laravel с серой рамкой

Question

Я пытаюсь отобразить карту на моей фактической позиции на laravel, но это не работает. Javascript-код кажется хорошим, потому что, когда я вставляю его в другой проект, он работает. Странно, потому что, когда я вставляю код документа google maps api, он тоже не работает. У меня серая коробка на карте div. Это мой Javascript Файл:

$(function() { 
    var pos = {}; 
    navigator.geolocation.getCurrentPosition(function(position) { 
    pos = position.coords; 
    initialize (pos); 
    }); 



function initialize (pos) { 
    var myLatlng = new google.maps.LatLng(pos.latitude, pos.longitude); 
    var mapOptions= { 
    center: myLatlng, 
    zoom: 15 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    } 
}); 

и вот мое мнение: @extends ('layouts.main')

@section('contenu') 
<div> 
    Itinéraire vers <span class="gras" id="city">{{{$city}}}</span>. 
</div> 

<canvas id="map-canvas"></canvas> 


{{ HTML::script('js/getRoute.js') }} 
@stop 

Я называю мой JQuery/карта/скрипт (в указанном порядке) в расположение. Я могу видеть на карте разработки, что я получаю плитку карты моего местоположения, но моя карта остается серой.

Answer 1

У меня была такая же проблема, в моем случае я просто установил, что центр и карта отображаются правильно. Вот моя функция инициализации.

function initialize() { 
 
    var mapCanvas = document.getElementById('map-canvas'); 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 
    var myLatlng = new google.maps.LatLng(44.5403, -78.5463); 
 
    map.setCenter(myLatlng); 
 
    var viewportheight = window.innerHeight; 
 
    document.getElementById("map-canvas").style.height = viewportheight + "px"; 
 
}

\t #map-canvas{ 
 
\t width:100%; 
 
\t min-height:100px; 
 
\t }

@extends('../master/head') 
 
@section('main_content') 
 
<div class="container" style="padding:0;margin:0;width:100%;max-width:none;overflow:hidden;"> 
 
\t \t <div class="row"> 
 
\t \t  <div class="col s12 m12 l12"> 
 
\t \t  \t <div id="map-canvas" ></div> \t 
 
\t \t  </div> 
 
\t \t </div> 
 
</div> 
 
@stop 
 
@section('footer_script') 
 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> 
 
@stop