I've been working on a GoogleMaps project where I load geoJSON points and display their "waterlevel" property in an info-box when hovering over a point. However, I want the info-box to show "Water Level = #" instead of just "#".
So far, I've managed to update the info-box text based on the waterlevel property of each point without issues. But my problem arises when I try to concatenate the "Water Level = " string with the geoJSON property.
I attempted to insert a div tag inside the info-box div to display the static text "Water Level = ", but it only shows up when the map first loads. As soon as I hover over a point, the text is replaced by the waterlevel property.
Any ideas on how I can successfully combine the "Water Level = " string with the geoJSON property?
Below is a snippet of my code:
//Fetch the geoJSON points and their properties
var script = document.createElement('script');
script.setAttribute('src',
'http://127.0.0.1:8000/geojson.json');
document.getElementsByTagName('head')[0].appendChild(script);
// Set mouseover event for each Point
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('waterlevel');
});
//LATER IN THE CODE
<body>
<div id="map-canvas"></div>
<div id="info-box"><div style="overflow:hidden;line-height:1.35;min-width:200px;"><b>Water Level = </b></div>?</div>
</body>