examples/info-bar.html

<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="root">
    You should see a blue status bar with a description of the place at the
    position of the marker when you move your mouse over the markers.

    <gmap-map
      :center="center"
      :zoom="15"
      style="width: 100%; height: 500px"
    >
      <gmap-marker
        v-for="m in markers"
        :position="{lat: m.position[0], lng: m.position[1]}"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
        @mouseover="statusText = m.text"
        @mouseout="statusText = null"
      ></gmap-marker>

      <div slot="visible">
        <div style="bottom: 0; left: 0; background-color: #0000FF; color: white; position: absolute; z-index: 100">
          {{statusText}}
        </div>
      </div>
    </gmap-map>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>
<script src="vue-google-maps.js"></script>

<script>

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

document.addEventListener('DOMContentLoaded', function() {
  new Vue({
    el: '#root',
    data: {
      center: {lat: 47.376332, lng: 8.547511},
      statusText: '',
      markers: [{
        position: [47.376332, 8.547511],
        text: 'Hauptgebäude der ETH Zürich'
      }, {
        position: [47.374592, 8.548867],
        text: 'Hauptgebäude der Universität Zürich'
      }]
    },
  });
});

</script>

</body>