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 

<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 

-
Edité par doub01 22 mai 2022 à 13:46:57