- This topic is empty.
September 29, 2016 at 4:33 pm #246021
I’m trying to use the “infobox” Google Maps plugin (basically a replacement for the default info windows that pop up when you click on a location), and I’ve managed to get the code to do most of what I want, but I’m stuck on something that feels super simple.
I set up the marker locations then call the function to create the infobox, which plugs in content from a div on the page using getElementById — this works just fine if I put the exact div ID in quotes, but not if I feed it a variable. Using the variable won’t bring up the content of the div with that ID. (I’ve tested to make sure the variable is being passed to the function successfully, and that part is OK.)
See this pen, line 65: http://codepen.io/ruby76/pen/ORjQwR
I thought changing it to document.getElementById(selected).value might help, but that seems to break part of the functionality — it stops going through the full loop to add all map markers, and still doesn’t plug in the content of that div.
The site in progress is here: http://easthowesteps.com/new/v4
(That one is referencing a div ID in quotes, so each marker is pulling up the same infobox content.)
Any ideas what I can do to get this to accept a variable? Thanks for any help!September 29, 2016 at 4:40 pm #246022
I’m seeing this in the console when clicking one of the pins on your map:
Uncaught ReferenceError: loc is not defined
Which may be the error that’s preventing everything from working.
At any rate, passing a variable into
getElementByIdis definitely valid, it’s kinda tough to guess what all’s going wrong. Do you have console logs before/after you can share?September 29, 2016 at 5:40 pm #246024
Whoops – I deleted that reference to loc (thanks!) but sadly that didn’t prevent the problem. I cleaned up a couple of other minor things that were showing up in the console, but now it’s just completely clean, at least in Chrome. I updated the pen link from above.
Neither passing the variable or the actual div value (“ehs”) produce any errors – the only difference is that the variable version gives me a blank popup box, and the “ehs” plugs in the content. But when I add that “.value” at the end, I do get a console error that it can’t read the property value of null.
Does that point to any other errors that you can think of?
Thanks so much for looking into this with me.September 29, 2016 at 6:03 pm #246025
Hmm well it sounds like the id doesn’t exist on any DOM elements. I’d start by verifying that whatever
selectedis equal to is actually the id you’re looking for.September 30, 2016 at 10:35 am #246053
Hmm, the names do match, but maybe there’s a better way to check? I just set up an alert to pop up the value of “selected” at the beginning of the infobox function – it does go through all 4 of them and they match the names of the divs. If I take that a step further and ask it to pop up document.getElementById(selected), it starts saying [object HTMLDivElement] for each one. If I do document.getElementById(selected).value, then it’s “undefined.”
It feels like even though the right variables are plugging in, it still can’t find the div. It’s on the same page and everything (http://easthowesteps.com/new/v4). Any other suggestions for how to crack this?
I updated the pen with the HTML code as well: http://codepen.io/ruby76/pen/ORjQwR
Thanks for your help!September 30, 2016 at 1:13 pm #246058
Oh! Are you trying to get the content of the div? You want
.value— does that fix it?
.valueis for input elements.September 30, 2016 at 2:25 pm #246059
Oh wow, that definitely made a difference, thank you! I apparently still have one more problem in that it’s just pulling in the div content for the 4th location on all 4. I have a loop that creates each marker, then calls the function to create the infobox with the “selected” div’s contents. Can you tell from the JS code how I seem to be creating the same infobox each time?
Sorry for the multi-question thread! Thanks so much for looking into this for me.September 30, 2016 at 3:15 pm #246061
It’s hard to say without being able to play around with it. It looks like what might be happening is since you’re not creating a new variable inside the
MakeInfoWindowfunction you end up modifying a global
infoboxeach time the function is run.
Try changing it to
var infobox = new InfoBoxinstead of just
infobox = new InfoBox, maybe?September 30, 2016 at 3:48 pm #246062
Oh my goodness, what a difference those three little letters made. That makes perfect sense and worked like a charm. Thank you so much! (I hope it’s registering that I’m clicking “good answer” every time I do.) You are my hero. :)September 30, 2016 at 4:21 pm #246063
Hey no problem, happy to help :) Glad it’s up n’ running.