Vue2-Google-Maps custom controls

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-google-maps.min.js"></script>
<body>
  <div id="root">
    <gmap-map ref="map" :options='{disableDefaultUI: true, zoomControl: true, autobindAllEvents: true}' :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
    </gmap-map>
    
    

</div>

</body>

JavaScript

Vue.use(VueGoogleMaps, {
      load: {
        key: 'AIzaSyBzay0Ds5pgDSirGKMC7PY5TBP83tFNs58'
      },
    });

new Vue({
        el: '#root',
        data: {},
        mounted() {
          this.$nextTick(() => {
          	this.$refs.map.$gmapApiPromiseLazy().then(this.loadControls);
          });
        },
        methods: {
        	loadControls(map) {
            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.$refs.map.$mapObject, 'center_changed', function () {
              secondChild.style['background-position'] = '0 0'
            })
            var ref = this
            firstChild.addEventListener('click', function () {
             ...