I tried, but don't show anything
thearabbit opened this issue ยท 10 comments
The first, very thanks for this ๐
But don't show anything (Meteor + Vue)
// index startup
import 'vue-googlemaps/dist/vue-googlemaps.css';
import VueGoogleMaps from 'vue-googlemaps';
Vue.use(VueGoogleMaps, {
load: {
apiKey: 'my-key',
// libraries: ['places'],
},
});
---------------
// Component
<template>
<div>
<h2>Map</h2>
<googlemaps-map :center.sync="center" :zoom.sync="zoom">
</googlemaps-map>
</div>
</template>
<script>
export default {
data() {
return {
center: { lat: 13.090618, lng: 103.208516 },
zoom: 8,
};
},
methods: {
}
};
</script>
<style scoped>
</style>
Did you try setting a size with CSS for <googlemaps-map>
?
Thanks, now work fine when I set css size
.
I'm having the same problem, I tried to add some css to my map container and map itself, but nothing happens.
// client/main.js
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
load: {
apiKey: 'my-key',
//libraries: ['places'],
},
})
// imports/ui/Home.vue
<template>
...
<div class="map-container">
<googlemaps-map
ref="map"
class="map"
:center.sync="center"
:zoom.sync="zoom"
>
</googlemaps-map>
</div>
</template>
<script>
export default {
data() {
return {
center: { lat: 13.090618, lng: 103.208516 },
zoom: 8,
};
},
methods: {
}
}
</script>
<style scoped lang="stylus">
.map-container
height: 100%
display: flex
flex-direction: column
.map
flex: 100% 1 1
</style>
In my Chrome Dev Tool, I can't see any HTML being generated in my .map-view
div.
What am I missing here?
Did you set a valid Google API Key with Google Maps API enabled in the Google developer console?
I just noticed that the Google Maps API scripts are not being added to my page. The live demo, has some 7 script tags added to it:
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/common.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/map.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/marker.js">
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/30/13/stats.js"></script>
@tsega same problem here. have you solved?
@Akryum Do you think could be a good idea to determine a default height for the component? So we don't need to argue if it's really working or not at initial setup.