Level 11
@cboxdk I don't believe you can load external scripts inside a Vue component's template (that's why when removing
May 2, 2016
5
Level 7
Issues with google maps / MapBox in vue component
As the topic states i have issues getting maps to work when it's inside a vue component. As an example i inserted a simple google map inside the home view like below. Not sure if this is a vuejs or spark thing, but i hope someone can push me in the right direction to solve it.
@extends('spark::layouts.app')
@section('content')
<home :user="user" inline-template>
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<div id="map" style="height: 400px; width: 100%"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=secretkey&callback=initMap"
async defer></script>
</div>
</div>
</div>
</div>
</div>
</home>
@endsection
If i remove the
@extends('spark::layouts.app')
@section('content')
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<div id="map" style="height: 400px; width: 100%"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=secretkey&callback=initMap"
async defer></script>
</div>
</div>
</div>
</div>
</div>
@endsection
Level 7
I tried to move the js into vue, but that still dosn't solve the issue. Now i get some of the map, but it renders in a wierd way. A screenshot can be seen here: http://imgur.com/NYMNa8c
@extends('spark::layouts.app')
@section('script')
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
@endsection
@section('content')
<inspectionmap :user="user">
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div id='map' style="width: 100%; height: 400px;"></div>
</div>
</div>
</inspectionmap>
@endsection
Vue.component('inspectionmap', {
props: ['user'],
data() {
return {
map: null
};
},
ready() {
L.mapbox.accessToken = 'secretkey';
this.map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
}
});
```
Level 1
Did you solve this? As I have same issue!
Level 53
I haven't tried a map in a Vue component yet but looking at the last post, I wonder if the map js and css isn't fully loaded before the Vue component completes loading. The ready() function fires after the Vue component loads so that's why I was guessing at that.
Level 4
You might want to check out vue-google-maps. I have used this in a project and it works very well.
Please or to participate in this conversation.