-1

I have a GoogleMaps page where I load geoJSON points into. These geoJSON points have a property called "waterlevel" which I want to display in an info-box when the cursor is on top of that point.

I currently can get the info-box to update its "text" based on the waterlevel property of each point no problem. The problem I have is that I would like the info-box to say "Water Level = #" rather than just "#".

I have tried making a div tag inside of the info-box div in the body, which says the static text "Water Level = ". The problem is that it will only display when the map originally loads. As soon as I mouse over any point, the whole text gets replaced by a # (magnitude of the waterlevel property).

How can I concatenate the "Water Level = " string with the geoJSON property?

Here's my code:

//Grab 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');
});



//MUCH 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>
Nik Kunkel
  • 335
  • 7
  • 14
  • What does your GeoJSON look like? We can't access 127.0.0.1 (localhost on your machine). – geocodezip Feb 10 '15 at 21:17
  • My apologies. http://pastebin.com/npeRRC6m Here is pictures of what Im describing. On load up it is correct, but it erases the static text "Water Level = " as soon as I pull the property water level by mousing over a node. http://imgur.com/a/fG8EY – Nik Kunkel Feb 10 '15 at 21:48
  • Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – geocodezip Feb 10 '15 at 22:19

1 Answers1

0

You can concatenate strings and variables by using the plus + character, try this: 

map.data.addListener('mouseover', function(event) {
    var waterlevel = event.feature.getProperty('waterlevel');
    document.getElementById('info-box').textContent = 'Waterlevel = ' + waterlevel;
});

working fiddle

geocodezip
  • 158,664
  • 13
  • 220
  • 245
iH8
  • 27,722
  • 4
  • 67
  • 76
  • Wow, I feel stupid now. I tried that earlier but with double quotes. Thanks for the enlightenment, was scratching my head on this one. – Nik Kunkel Feb 10 '15 at 22:23
  • 1
    You've must have done something else wrong because it doesn't matter if you use double or single quotes, that's a matter of preference. I always use single because then i don't have to escape double quotes when using HTML as a string: `var str = 'link'` vs `var str = "link"` Here's more on the topic: http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript – iH8 Feb 10 '15 at 22:40