title: How to add my location button in Google Maps using VueJs?
body: <p>How to add my location button in <code>Google Maps</code> using <code>VueJs</code>?</p>
  <p><a href="https://i.stack.imgur.com/qLvKV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qLvKV.png" alt="enter image description here" /></a></p>
  <h1>Lines of erros:</h1>
  <pre><code> window.google.maps.event.addListener(this.map, 'center_changed', function () {
              secondChild.style['background-position'] = '0 0'})
  </code></pre>
  <blockquote>
  <p>Cannot read property 'center_changed' of undefined</p>
  </blockquote>
  <pre><code>this.map.controls[window.google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv)
  </code></pre>
  <blockquote>
  <p>Cannot read property '9' of undefined</p>
  </blockquote>
  <h1>Code</h1>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
       &lt;gmap-map v-if='mostraMapa'
              :center='center'
              :zoom='20'
              map-type-id='terrain'
              style='width:100%;  height: 500px;'
              :options='{disableDefaultUI: true, zoomControl: true}'&gt;
              &lt;gmap-marker
                 :position='marker.position'
                 @click='center=marker.position'
                 ref=&quot;map&quot;
                 &gt;&lt;/gmap-marker&gt;
           &lt;/gmap-map&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'MeuMapa',
    props: ['mostraMapa'],
    data () {
      return {
        map: '',
        marker: '',
        center: { lat: -19.9191248, lng: -43.9386291 }
      }
    },
    created () {
      this.geolocate()
    },
    methods: {
      createMarker: function (latlng) {
        this.marker = new window.google.maps.Marker({
          setMap: this.map,
          position: latlng,
          animation: window.google.maps.Animation.DROP
        })
        this.addYourLocationButton()
      },
      geolocate: function () {
        navigator.geolocation.getCurrentPosition(position =&gt; {
          let latlng = new window.google.maps.LatLng(
            parseFloat(position.coords.latitude),
            parseFloat(position.coords.longitude))
          this.center = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          }
          this.createMarker(latlng)
        })
      },
      addYourLocationButton: function () {
        var controlDiv = document.createElement('div')
  
        var firstChild = document.createElement('button')
        firstChild.style.backgroundColor = '#fff'
        firstChild.style.border = 'none'
        firstChild.style.outline = 'none'
        firstChild.style.width = '28px'
        firstChild.style.height = '28px'
        firstChild.style.borderRadius = '2px'
        firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)'
        firstChild.style.cursor = 'pointer'
        firstChild.style.marginRight = '10px'
        firstChild.style.padding = '0px'
        firstChild.title = 'Your Location'
        controlDiv.appendChild(firstChild)
  
        var secondChild = document.createElement('div')
        secondChild.style.margin = '5px'
        secondChild.style.width = '18px'
        secondChild.style.height = '18px'
        secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)'
        secondChild.style.backgroundSize = '180px 18px'
        secondChild.style.backgroundPosition = '0px 0px'
        secondChild.style.backgroundRepeat = 'no-repeat'
        secondChild.id = 'you_location_img'
        firstChild.appendChild(secondChild)
  
        window.google.maps.event.addListener(this.map, 'center_changed', function () {
          secondChild.style['background-position'] = '0 0'
        })
        firstChild.addEventListener('click', function () {
          var imgX = '0'
          var animationInterval = setInterval(function () {
            if (imgX === '-18') imgX = '0'
            else imgX = '-18'
            document.getElementById('you_location_img').style.backgroundPosition = '0px 0px'
          }, 500)
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
              var latlng = new window.google.maps.LatLng(position.coords.latitude, position.coords.longitude)
              this.marker.setPosition(latlng)
              this.map.setCenter(latlng)
              clearInterval(animationInterval)
              document.getElementById('you_location_img').style.backgroundPosition = '-144px 0px'
            })
          } else {
            clearInterval(animationInterval)
            document.getElementById('you_location_img').style.backgroundPosition = '0px 0px'
          }
        })
  
        controlDiv.index = 1
        this.map.controls[window.google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv)
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>