如何使用Vue JS在Google地图中放置标记？

Question

我正在用Google Maps在vue js中做一个组件来显示地图。我可以显示地图，但不能显示标记

模板：

<template>
    <div>
      <button id="btnPintar" type="button" v-on:click.prevent="transformar()" class="btn btn-info btn-sm" style="margin:1px;">Convertir coordenada</button><button type="button" v-on:click.prevent="pintarPunto()" class="btn btn-success btn-sm" style="margin:1px;">Mostrar coordenada</button> <p>Latitud : {{this.latitud}}  Longitud : {{this.longitud}}</p>
      <div class="google-map" :id="mapName">    
      </div>    
  </div>
</template>

脚本：

<script>
export default {
  name: 'google-map',
  props: [
    'name',
    'UtmxNorte',
    'UtmyEste',
    'Zona'
  ],
  data: function () {
    return {
      mapName: this.name + "-map",
      map:null,
      bounds:null,
      markerCoordinates: [{
        latitude: -71,
        longitude: -13
      }],
      makers:[],
      latitud:-71,
      longitud:-13
    }
  },
  mounted: function () {
    this.bounds = new google.maps.LatLngBounds();
    const element = document.getElementById(this.mapName)
    const options = {
      zoom: 14,
      center: new google.maps.LatLng(-13.52264,-71.96734),
      mapTypeId: 'satellite',
      styles:[
                  {
                    "featureType": "administrative",
                    "elementType": "geometry",
                    "stylers": [
                      {
                        "visibility": "off"
                      }
                    ]
                  },
                  {
                    "featureType": "poi",
                    "stylers": [
                      {
                        "visibility": "off"
                      }
                    ]
                  },
                  {
                    "featureType": "road",
                    "elementType": "labels.icon",
                    "stylers": [
                      {
                        "visibility": "off"
                      }
                    ]
                  },
                  {
                    "featureType": "transit",
                    "stylers": [
                      {
                        "visibility": "off"
                      }
                    ]
                  }
                ]
    }
    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
      });


    });
  },
  methods:{
    transformar: function(){
        var latlon = new Array(2);
        var x, y, zone, southhemi;
        x=parseFloat(this.UtmxNorte);
        y=parseFloat(this.UtmyEste);
        zone=parseFloat(this.Zona);
        southhemi=true;

        UTMXYToLatLon (x, y, zone, southhemi, latlon); 
        this.latitud=RadToDeg (latlon[0]);
        this.longitud=RadToDeg (latlon[1]);
        toastr.info(this.longitud);
    },
    pintarPunto: function(){
        //

    }
  }
};
</script>

当我使用组件时，它显示地图，但不显示标记。 谁能帮我，我不知道我在做什么错。

我这样称呼组件：

<div class="col-md-9">
                                        <google-map
                                            name="example"
                                            v-bind:UtmxNorte="ARQL_douUTMxNorte"
                                            v-bind:UtmyEste="ARQL_douUTMyEste"
                                            v-bind:Zona="ARQL_intZona"
                                        >                                               
                                        </google-map>
                                    </div> 

来自另一个组件，它向我显示： 没有标记。