Question

我正在尝试在laravel上显示我的实际位置上的地图，但这不起作用。 Javascript代码似乎很好，因为当我将其粘贴到其他项目中时，它正在运行。这很奇怪，因为当我粘贴google maps api的doc代码时，它也不起作用。我在地图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 / map / script（按顺序）。我可以在开发者地图中看到我收到我所在位置地图的图块，但我的地图保持灰色。

Answer 1

我遇到了同样的问题，我的情况是我只是设置正确的中心和地图。这是我的初始化函数，。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

google map api v3不要加载带有灰色框的laravel

1 个答案: