title: Vue google maps infowindow custom buttons not working
body: <p><strong>Hey vue-ers!</strong></p>
  
  <p>I am using vue2-google-maps with all its glories and so far I have managed a lot except for custom buttons within an info-window. So far I can click on a marker and it shows the related custom info-window with the right info. The only thing I am missing now is making those buttons work. For example the close button: I can click on it and it speaks to the component method but does not close it. The close button works the same as selecting the markers, but at the same time it's not? The values update to false, but not being updated in the maps, while I select a marker it updates like a charm. So I am quite stuck here and fairly confused, any help, ideas and tips are appreciated!</p>
  
  <p>Here is my code for reference:</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;gmap-map
      id="map"
      :center="center"
      :zoom=13
      :options="{
          disableDefaultUI: true,
          zoomControl: true,
          clickableIcons: true,
      }"&gt;
  
      &lt;gmap-marker
          v-for="(location, index) in locations"
          :position="{lat: location.latitude, lng: location.longitude}"
          :icon="location.icon"
          :zone="location.zone"
          :jettyNumber="location.jettyNumber"
          :selected="location.selected"
          :zIndex="location.zIndex"
          @mouseover="mouseOverMarker(index)"
          @mouseout="mouseOutMarker(index)"
          @click="openInfoWindow(index)"
          :label="{
              text: location.jettyNumber.toString(),
              color: '#fff',
              fontSize: '13px',
              fontFamily: 'din_round_otbold'
          }"&gt;
  
          &lt;gmap-info-window
              :opened="location.infoBoxOpen"&gt;
                  &lt;div class="infoWindow" style="width: 300px;"&gt;
                      &lt;div id="dock-zone" :class="getZoneClass(location.zone)"&gt;{{ getZoneClassText(location.zone) }}&lt;/div&gt;
                      &lt;h2 id="infoWindow-location"&gt;{{ location.name }}&lt;/h2&gt;
                      &lt;div id="close-btn" @click="closeInfoWindow(index)"&gt;&lt;/div&gt;
                      &lt;a class="btn btn-primary google-maps-infowindow-button"&gt;Kies als &lt;b&gt;{{ inputData.label }}&lt;/b&gt;&lt;/a&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/div&gt;
          &lt;/gmap-info-window&gt;
      &lt;/gmap-marker&gt;
  &lt;/gmap-map&gt;
  </code></pre>
  
  <p><strong>Component Script</strong></p>
  
  <pre><code>import $ from "jquery";
  export default {
  data: function(){
      return {
          icons: {
              stopInner: {
                  icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_inner.svg'
              },
              stopOuter: {
                  icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_outer.svg'
              },
              stopOutside: {
                  icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_outside.svg'
              },
              stopSelected: {
                  icon: process.env.VUE_APP_PUBLIC_URL + '/Assets/images/pinpoint_on_map_active.svg'
              }
          },
          locations: [],
          center: {lat: 51.9004, lng: 4.46849},
          inputData: {}
      };
  },
  methods: {
      initMap(locations, inputData) {
          // Set maps specific data
          for(var i = 0; i &lt; locations.length; i++) {
              locations[i].selected = false;
              locations[i].infoBoxOpen = false;
              locations[i].zIndex = locations[i].jettyNumber;
              locations[i].icon = this.getIcon(locations[i].zone);
          }
          this.inputData = inputData;
          this.locations = locations;
      },
      getIcon(zone) {
          switch(zone){
              case "centre":
                  return this.icons.stopInner.icon;
              break;
              case null:
                  return this.icons.stopOutside.icon;
              break;
              default:
                  return this.icons.stopOuter.icon;
              break;
          }
      },
      getZoneClass(zone) {
          switch(zone){
              case "centre":
                  return "centrum";
              break;
              case null:
                  return "buiten";
              break;
              default:
                  return "";
              break;
          }
      },
      getZoneClassText(zone) {
          if(zone){
              return zone;
          }else{
              return "outside";
          }
      },
      // TODO: Not really setting the zindex, need to dig deeper
      mouseOverMarker(locationIndex) { 
          this.locations[locationIndex].zIndex = 99998;
      },
      mouseOutMarker(locationIndex) { 
          this.locations[locationIndex].zIndex = this.locations[locationIndex].jettyNumber; 
      },
      openInfoWindow(location){
          this.center = {lat: location.latitude, lng: location.longitude};
          this.setSelectedLocation(location);
      },
      setSelectedLocation(selectedLocationIndex){
          this.unselectLocations();
          // Set selected
          this.locations[selectedLocationIndex].zIndex = 88888;
          this.locations[selectedLocationIndex].icon = this.icons.stopSelected.icon;
          this.locations[selectedLocationIndex].selected = true;
          this.locations[selectedLocationIndex].infoBoxOpen = true;
          this.center = {
              lat: this.locations[selectedLocationIndex].latitude,
              lng: this.locations[selectedLocationIndex].longitude
          };
          this.alterDefaultInfoWindowStyle();
      },
      unselectLocations() {
          for(var i = 0; i &lt; this.locations.length; i++) {
              this.locations[i].icon = this.getIcon(this.locations[i].zone);
              this.locations[i].zIndex = this.locations[i].jettyNumber;
              this.locations[i].selected = false;
              this.locations[i].infoBoxOpen = false;
          }
      },
      alterDefaultInfoWindowStyle() {
          // TODO: a very nasty fix, need a better way to handle this
          setTimeout(function(){
              var iwOuter = $('.gm-style-iw');
              iwOuter.parent().parent().css({ top: '20px' });
              iwOuter.css({ top: '0px' });
              iwOuter.css({ left: '26px' });
  
              var iwBackground = iwOuter.prev();
              iwBackground.css({ 'display': 'none' });
              var iwCloseBtn = iwOuter.next();
  
              iwCloseBtn.hide();
              iwOuter.children().eq(0).css({ overflow: 'visible' });
          }, 10);
      },
      closeInfoWindow(selectedLocationIndex) {
          this.unselectLocations();
      },
      closeMaps() {
          this.$emit('close-maps')
      }
  }
  </code></pre>
  
  <p>}</p>