Do not use built-in or reserved HTML elements as component id

[RaoulBivolaru]

My code:

<template>
    <google-map
        :center.sync      = "map.center"
        :zoom.sync        = "map.zoom"
        :map-type-id.sync = "map.type">
    </google-map>
</template>

<script>

    var VueGoogleMap = require('vue-google-maps');

    export default {

        props: ['route'],

        components: {
            GoogleMap:  VueGoogleMap.Map,
            Marker:     VueGoogleMap.Marker,
            Cluster:    VueGoogleMap.Cluster,
            InfoWindow: VueGoogleMap.InfoWindow,
            Polyline:   VueGoogleMap.Polyline,
            Rectangle:  VueGoogleMap.Rectangle,
            Circle:     VueGoogleMap.Circle,
            Polygon:    VueGoogleMap.Polygon,
            PlaceInput: VueGoogleMap.PlaceInput,
        },

        /*
         * The component's data.
         */
        data() {
            return {
                map: {
                    center: {},
                    zoom: 12,
                    position: {},
                    type: 'terrain',
                },
            }
        },

        mounted() {

        },

        methods: {

        }
    }
</script>

When I try to view the page in browser I get those errors:

vue.js?3de6:2611[Vue warn]: Do not use built-in or reserved HTML elements as component id: Marker warn @ vue.js?3de6:2611normalizeComponents @ vue.js?3de6:2830mergeOptions @ vue.js?3de6:2900Vue.extend @ vue.js?3de6:3240Vue.(anonymous function) @ vue.js?3de6:3294(anonymous function) @ app.js?8b67:31(anonymous function) @ app.js:636__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?3de6:2611[Vue warn]: Do not use built-in or reserved HTML elements as component id: Polyline warn @ vue.js?3de6:2611normalizeComponents @ vue.js?3de6:2830mergeOptions @ vue.js?3de6:2900Vue.extend @ vue.js?3de6:3240Vue.(anonymous function) @ vue.js?3de6:3294(anonymous function) @ app.js?8b67:31(anonymous function) @ app.js:636__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?3de6:2611[Vue warn]: Do not use built-in or reserved HTML elements as component id: Circle warn @ vue.js?3de6:2611normalizeComponents @ vue.js?3de6:2830mergeOptions @ vue.js?3de6:2900Vue.extend @ vue.js?3de6:3240Vue.(anonymous function) @ vue.js?3de6:3294(anonymous function) @ app.js?8b67:31(anonymous function) @ app.js:636__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
vue.js?3de6:2611[Vue warn]: Do not use built-in or reserved HTML elements as component id: Polygon 

[uebbi]

Solution: http://jsfiddle.net/uebbi/tck3kn5p/4/

You must use the @khenam fork's version of vue-google-maps (compatible with Vue 2) and adjust explicitly the height of div wrapper (check code).