How do I add hover boxes that display a .geojson property over a marker in Google Maps?

Question

I am working on a project where I am plotting a few hundred homes in the Google Maps API using a .geojson file which contains all of them as features with numerous properties. I have gotten my .js file to load the .geojson file and display each home as a marker on the map, however I cannot figure out how to interact with these points. I am trying to get the points to display a text box with their address (which is listed as one of the properties) in it when hovering over the point.

This is all I have managed to write for my .js file so far -

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 41.8963964, lng: -87.6864236},
          zoom: 13
  });

  map.data.loadGeoJson('data_table.json', 'Full Address');
}

https://i.sstatic.net/oBsJf.png

This is an image of the type of text-box I am trying to create when hovering over a point.

Answer 1

To open an InfoWindow on mouseover:

1. create an InfoWindow:

var infowindow = new google.maps.InfoWindow({
  pixelOffset: new google.maps.Size(0, -40) // offset for icon
});

2. add a mouseover event listener to the Data Layer that opens the InfoWindow, and displays the appropriate property in it (below "prop0"):

map.data.addListener('mouseover', function(evt) {
  infowindow.setContent(evt.feature.getProperty('prop0'));
  infowindow.setPosition(evt.feature.getGeometry().get());
  infowindow.open(map);
});

proof of concept fiddle

code snippet:

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });
  var infowindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(0, -40)
  });
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(evt) {
    if (evt.feature.getGeometry().getType() == 'Point') {
      bounds.extend(evt.feature.getGeometry().get());
      map.fitBounds(bounds);
    }
  })
  map.data.addGeoJson(geoJson);
  map.data.addListener('mouseover', function(evt) {
    console.log(evt.feature.getProperty('prop0'));
    infowindow.setContent(evt.feature.getProperty('prop0'));
    infowindow.setPosition(evt.feature.getGeometry().get());
    infowindow.open(map);
  })
}
var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.563032, 45.495403]
      },
      "properties": {
        "prop0": "value0"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.549762, 45.559673]
      },
      "properties": {
        "prop0": "value1"
      }
    }
  ]
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>