<template>
  <div class="google-map" :id="mapName"></div>
</template>

<script>
export default {
  name: 'google-map',
  props: ['name'],
  data: function () {
    return {
      mapName: this.name + "-map",
      markerCoordinates: [{
        latitude: 41.3850639,
        longitude: 2.1734035
      }, {
        latitude: 41.4023337,
        longitude: 2.2015487
      }, {
        latitude: 41.3947209,
        longitude: 2.1761431
      }],
      map: null,
      bounds: null,
      markers: [],
      label: {text:'A', color: "white"}
    }
  },
  mounted: function () {
    this.bounds = new google.maps.LatLngBounds();
    const element = document.getElementById(this.mapName)
    const mapCentre = this.markerCoordinates[0]
    const options = {
      center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude)
    }
    this.map = new google.maps.Map(element, options);
    this.markerCoordinates.forEach((coord) => {
      const position = new google.maps.LatLng(coord.latitude, coord.longitude);
      const marker = new google.maps.Marker({
        position,
        map: this.map,
        label: this.label
      });
    this.markers.push(marker)
      this.map.fitBounds(this.bounds.extend(position))
    });
  }
}
</script>

<style scoped>
.google-map {
  width: auto;
  height: 450px;
  margin: 0 auto;
  background: gray;
  border-radius: 4px;
}
</style>

google.maps.event.addListener(name, 'mouseover', function() {
    //FUNCION
});

<template>
   ...
   <google-map></google-map>
   ...
</template>
<script>
import GoogleMap from './GoogleMap';

export default{
    name: 'ListDetail',
    components: {
        GoogleMap,
    }
</script>