Akryum/vue-googlemaps

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.

tsega commented

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.

screen shot 2017-11-05 at 9 19 46 am

What am I missing here?

Did you set a valid Google API Key with Google Maps API enabled in the Google developer console?

tsega commented

Yes I have a valid Google Maps API (enabled). I actually tried a new one just now, but no change.

The problem is I don't see any error in my console Chrome+Vue but here is what it looks like:

screen shot 2017-11-05 at 3 19 26 pm

tsega commented

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

  .map-view {
    height: 100%;
    width: 100%;
  }

@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.