vuejs et google maps

bonjour je voudrais afficher une carte sur une page geolocalisation de google map , j'ai douc recuperer la clé crée composant et fait view de cela ne s'affiche pas . J'ai bien ajouter npm install vue2-google-maps --save.

vue sur ce site : https://www.tutsmake.com/vue-js-google-map-integration-example/

composent de vue :
<template>
<div>
<div>
<h2>Search and add a pin</h2>
<label>
<gmap-autocomplete
@place_changed="setPlace">
</gmap-autocomplete>
<button @click="addMarker">Add</button>
</label>
<br/>

</div>
<br>
<gmap-map
  :center="center"
  :zoom="12"
  style="width:100%;  height: 400px;"
>
  <gmap-marker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    @click="center=m.position"
  ></gmap-marker>
</gmap-map>

</div>
</template>

<script>
export default {
name: "GoogleMap",
data() {
return {
// change this to whatever makes sense
center: { lat: 45.508, lng: -73.587 },
markers: [],
places: [],
currentPlace: null
};
},

mounted() {
this.geolocate();
},

methods: {
setPlace(place) {
this.currentPlace = place;
},
addMarker() {
if (this.currentPlace) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng()
};
this.markers.push({ position: marker });
this.places.push(this.currentPlace);
this.center = marker;
this.currentPlace = null;
}
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
}
}
};
</script>

view dans vue.js :

<template>
<div id="app">
<google-map />
</div>
</template>

<script>
import GoogleMap from "./components/GoogleMap";

export default {
name: "App",
components: {
GoogleMap
}
};
</script>

pouvez-vous m'aide a debloque la situation je voudrais afficher sur une page web