Object.entries is not a function

[MarineLB]

When following the example code below :

<template>
    <gmap-map
            :center="center"
            :zoom="7"
            style="width: 500px; height: 300px"
    >
        <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                :draggable="true"
                @click="center=m.position"
        ></gmap-marker>
    </gmap-map>
</template>

<script>
  /////////////////////////////////////////
  // New in 0.4.0
  import * as VueGoogleMaps from 'vue2-google-maps';
  import Vue from 'vue';

  Vue.use(VueGoogleMaps, {
    load: {
      key: 'HERE_IS_MY_SECRET_API_KEY',
      // libraries: 'places', //// If you need to use place input
    }
  })

  export default {
    data () {
      return {
        center: {lat: 10.0, lng: 10.0},
        markers: [{
          position: {lat: 10.0, lng: 10.0}
        }, {
          position: {lat: 11.0, lng: 11.0}
        }]
      }
    }
  }
</script>

I get the error

[vue-router] Failed to resolve async component default: TypeError: Object.entries is not a function
[vue-router] uncaught error during route navigation:
TypeError: Object.entries is not a function
    at mappedPropsToVueProps (/app/node_modules/vue2-google-maps/dist/components/mapElementFactory.js:158:17)

From some Google search it appears that Object.entries is not supported in some browser. Am I the only one with this issue ?

[HKskn]

@MarineLB I think it is now working in es5 browsers

[MarineLB]

@HKskn what's weird is that I get this error in Chrome..

[xkjyeah]

You're not the only one.

If you are planning to use IE11, please get babel-polyfill.

If using Nuxt.js:

build: {
    vendor: ['babel-polyfill'],
}

If using Webpack:

entry: ['babel-polyfill', 'YOUR-ENTRYPOINT-HERE']

[Shuunen]

Thanks @xkjyeah your solution worked 👍

Note : I had this problem on Chrome 27 (really old, but still used by PhantomJS version of a test tool)