Unescaped XML character when assigning value to Javascript

So I can't get around this. I am trying to assign an XML value to javascript in order to request a google map. This is inside a for each, so I can display a small map for each location. Please help.
EDIT: I uploaded the whole XSL file which has some other issues, such as the mess of CSS, and accordion issues. But my main focus is the javascript issues at the bottom. The XML data being used is a dictionary of events, and I am trying to call the stored LAT and LNG so that I may produce a google map per event location. Thank you.

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">

<html>

<head>

    <title>XSL</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>





<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);

    background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">

    <div class="container">

        <center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">

            Impulse</font></center>

        <center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">

            Your friendly computer science event organizer</font></p></center>



        <div class="panel-group" id="accordion">

        <xsl:for-each select="all/*">

        <div class="panel panel-default" style="background: rgba(255,255,255.75);" >

          <div class="panel-heading">

            <h4 class="panel-title">

              <a data-toggle="collapse" href="#collapse2">

                  <xsl:if test="Type = 'Careers'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid green; border-radius: 10px; padding: 7px;"

                              src="png/career.png" alt="Careers">Careers</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Database'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid blue; border-radius: 10px; padding: 7px;"

                           src="png/database.png" alt="Database">Database</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Game Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid red; border-radius: 10px; padding: 7px;"

                           src="png/gamepad.png" alt="Game Development">Game Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Mobile App'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid purple; border-radius: 10px; padding: 5px;"

                           src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Networking'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid yellow; border-radius: 10px; padding: 7px;"

                           src="png/networking.png" alt="Networking">Networking</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Robotics'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"

                           src="png/robot.png" alt="Robotics">Robotics</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Cyber Security'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid aqua; border-radius: 10px; padding: 7px;"

                           src="png/security.png" alt="Cyber Security">Cyber Security</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Teach Code'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"

                           src="png/teach.png" alt="Teach Code">Teach Code</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Alt Reality'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"

                           src="png/vr.png" alt="Alternate Reality">Alt Reality</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Web Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #35405A; border-radius: 10px; padding: 7px;"

                              src="png/webdev.png" alt="Website Development">Web Dev</img>

                  </xsl:if >

                  <object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>

                  <object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>

              </a>

            </h4>

          </div>

          <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                <div>Event details go here</div>

                <br></br>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>

                <div>



                    <script type="text/javascript">

                        function initMap() {

                            var location = {lat: "&lt;xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",

                                            lng: "&lt;xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};

                            var map = new google.maps.Map(document.getElementById('map'), {

                                zoom: 16,

                                center: location

                                });

                            var marker = new google.maps.Marker({

                                position: location,

                                map: map

                            });

                        }

                    </script>

                    <script async="async" defer="defer"

                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&amp;callback=initMap">

                    </script>

                </div>

            </div>

          </div>

        </div>

        </xsl:for-each>

      </div>



    </div>



</body>

</html>

</xsl:template>

</xsl:stylesheet>

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

If you don't mind ES6 you can use backticks
– Abana Clara
Nov 16 at 0:31

What is the problem? You have provided a snippet of XSLT. What does your XML look like, and why is the output not meeting your expectations? Can you provide a snippet of the current output and describe why it isn't meeting your expectations?
– Mads Hansen
Nov 16 at 3:34

Shouldn't your lat and lng properties be numbers? Why wrap with quotes and make them strings?
– Mads Hansen
Nov 16 at 3:40

Just added the XSL file, They are integers. Originally they weren't wrapped in quotes. I came across a solution that corrected the issues with quotes but apparently, it was a different issue.
– Joshua Martinez
Nov 16 at 4:04

The Javascript code new google.maps.Map(document.getElementById('map') only makes sense if there is an HTML element with an id="map" attribute somewhere, I don't find it. And obviously if you want to create several maps then you will have to set up several elements with different id values and adjust the Javascript.stackoverflow.com/questions/52521343/… might help although I am not sure it solves the same problem, you will need to elaborate on whether you want to have several maps visible in several HTML elements at the same time.
– Martin Honnen
Nov 16 at 10:32

add a comment |

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">

<html>

<head>

    <title>XSL</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>





<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);

    background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">

    <div class="container">

        <center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">

            Impulse</font></center>

        <center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">

            Your friendly computer science event organizer</font></p></center>



        <div class="panel-group" id="accordion">

        <xsl:for-each select="all/*">

        <div class="panel panel-default" style="background: rgba(255,255,255.75);" >

          <div class="panel-heading">

            <h4 class="panel-title">

              <a data-toggle="collapse" href="#collapse2">

                  <xsl:if test="Type = 'Careers'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid green; border-radius: 10px; padding: 7px;"

                              src="png/career.png" alt="Careers">Careers</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Database'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid blue; border-radius: 10px; padding: 7px;"

                           src="png/database.png" alt="Database">Database</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Game Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid red; border-radius: 10px; padding: 7px;"

                           src="png/gamepad.png" alt="Game Development">Game Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Mobile App'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid purple; border-radius: 10px; padding: 5px;"

                           src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Networking'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid yellow; border-radius: 10px; padding: 7px;"

                           src="png/networking.png" alt="Networking">Networking</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Robotics'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"

                           src="png/robot.png" alt="Robotics">Robotics</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Cyber Security'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid aqua; border-radius: 10px; padding: 7px;"

                           src="png/security.png" alt="Cyber Security">Cyber Security</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Teach Code'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"

                           src="png/teach.png" alt="Teach Code">Teach Code</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Alt Reality'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"

                           src="png/vr.png" alt="Alternate Reality">Alt Reality</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Web Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #35405A; border-radius: 10px; padding: 7px;"

                              src="png/webdev.png" alt="Website Development">Web Dev</img>

                  </xsl:if >

                  <object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>

                  <object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>

              </a>

            </h4>

          </div>

          <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                <div>Event details go here</div>

                <br></br>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>

                <div>



                    <script type="text/javascript">

                        function initMap() {

                            var location = {lat: "&lt;xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",

                                            lng: "&lt;xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};

                            var map = new google.maps.Map(document.getElementById('map'), {

                                zoom: 16,

                                center: location

                                });

                            var marker = new google.maps.Marker({

                                position: location,

                                map: map

                            });

                        }

                    </script>

                    <script async="async" defer="defer"

                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&amp;callback=initMap">

                    </script>

                </div>

            </div>

          </div>

        </div>

        </xsl:for-each>

      </div>



    </div>



</body>

</html>

</xsl:template>

</xsl:stylesheet>

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

If you don't mind ES6 you can use backticks
– Abana Clara
Nov 16 at 0:31

What is the problem? You have provided a snippet of XSLT. What does your XML look like, and why is the output not meeting your expectations? Can you provide a snippet of the current output and describe why it isn't meeting your expectations?
– Mads Hansen
Nov 16 at 3:34

Shouldn't your lat and lng properties be numbers? Why wrap with quotes and make them strings?
– Mads Hansen
Nov 16 at 3:40

Just added the XSL file, They are integers. Originally they weren't wrapped in quotes. I came across a solution that corrected the issues with quotes but apparently, it was a different issue.
– Joshua Martinez
Nov 16 at 4:04

The Javascript code new google.maps.Map(document.getElementById('map') only makes sense if there is an HTML element with an id="map" attribute somewhere, I don't find it. And obviously if you want to create several maps then you will have to set up several elements with different id values and adjust the Javascript.stackoverflow.com/questions/52521343/… might help although I am not sure it solves the same problem, you will need to elaborate on whether you want to have several maps visible in several HTML elements at the same time.
– Martin Honnen
Nov 16 at 10:32

add a comment |

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">

<html>

<head>

    <title>XSL</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>





<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);

    background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">

    <div class="container">

        <center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">

            Impulse</font></center>

        <center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">

            Your friendly computer science event organizer</font></p></center>



        <div class="panel-group" id="accordion">

        <xsl:for-each select="all/*">

        <div class="panel panel-default" style="background: rgba(255,255,255.75);" >

          <div class="panel-heading">

            <h4 class="panel-title">

              <a data-toggle="collapse" href="#collapse2">

                  <xsl:if test="Type = 'Careers'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid green; border-radius: 10px; padding: 7px;"

                              src="png/career.png" alt="Careers">Careers</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Database'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid blue; border-radius: 10px; padding: 7px;"

                           src="png/database.png" alt="Database">Database</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Game Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid red; border-radius: 10px; padding: 7px;"

                           src="png/gamepad.png" alt="Game Development">Game Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Mobile App'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid purple; border-radius: 10px; padding: 5px;"

                           src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Networking'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid yellow; border-radius: 10px; padding: 7px;"

                           src="png/networking.png" alt="Networking">Networking</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Robotics'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"

                           src="png/robot.png" alt="Robotics">Robotics</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Cyber Security'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid aqua; border-radius: 10px; padding: 7px;"

                           src="png/security.png" alt="Cyber Security">Cyber Security</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Teach Code'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"

                           src="png/teach.png" alt="Teach Code">Teach Code</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Alt Reality'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"

                           src="png/vr.png" alt="Alternate Reality">Alt Reality</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Web Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #35405A; border-radius: 10px; padding: 7px;"

                              src="png/webdev.png" alt="Website Development">Web Dev</img>

                  </xsl:if >

                  <object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>

                  <object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>

              </a>

            </h4>

          </div>

          <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                <div>Event details go here</div>

                <br></br>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>

                <div>



                    <script type="text/javascript">

                        function initMap() {

                            var location = {lat: "&lt;xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",

                                            lng: "&lt;xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};

                            var map = new google.maps.Map(document.getElementById('map'), {

                                zoom: 16,

                                center: location

                                });

                            var marker = new google.maps.Marker({

                                position: location,

                                map: map

                            });

                        }

                    </script>

                    <script async="async" defer="defer"

                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&amp;callback=initMap">

                    </script>

                </div>

            </div>

          </div>

        </div>

        </xsl:for-each>

      </div>



    </div>



</body>

</html>

</xsl:template>

</xsl:stylesheet>

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

<?xml version="1.0"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">

<html>

<head>

    <title>XSL</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One" type="text/css"/>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>





<body style="font-family: 'Poiret One', cursive; font-weight: bold; background-image: url(png/BG01dark.jpg);

    background-size: cover; background-position: center; background-repeat: none; background-attachment: fixed;">

    <div class="container">

        <center><font style="color: white; font-size: 50px; text-shadow: 2px 2px 3px #000000;">

            Impulse</font></center>

        <center><p><font style="color: white; font-size: 20px; text-shadow: 1px 1px 1px #000000;">

            Your friendly computer science event organizer</font></p></center>



        <div class="panel-group" id="accordion">

        <xsl:for-each select="all/*">

        <div class="panel panel-default" style="background: rgba(255,255,255.75);" >

          <div class="panel-heading">

            <h4 class="panel-title">

              <a data-toggle="collapse" href="#collapse2">

                  <xsl:if test="Type = 'Careers'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid green; border-radius: 10px; padding: 7px;"

                              src="png/career.png" alt="Careers">Careers</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Database'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid blue; border-radius: 10px; padding: 7px;"

                           src="png/database.png" alt="Database">Database</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Game Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid red; border-radius: 10px; padding: 7px;"

                           src="png/gamepad.png" alt="Game Development">Game Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Mobile App'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid purple; border-radius: 10px; padding: 5px;"

                           src="png/mobile.png" alt="Mobile Development">Mobile Dev</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Networking'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid yellow; border-radius: 10px; padding: 7px;"

                           src="png/networking.png" alt="Networking">Networking</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Robotics'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FF6D14; border-radius: 10px; padding: 7px;"

                           src="png/robot.png" alt="Robotics">Robotics</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Cyber Security'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid aqua; border-radius: 10px; padding: 7px;"

                           src="png/security.png" alt="Cyber Security">Cyber Security</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Teach Code'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #FFB34C; border-radius: 10px; padding: 7px;"

                           src="png/teach.png" alt="Teach Code">Teach Code</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Alt Reality'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #8D301D; border-radius: 10px; padding: 7px;"

                           src="png/vr.png" alt="Alternate Reality">Alt Reality</img>

                  </xsl:if>

                  <xsl:if test="Type = 'Web Dev'">

                      <img style="background: rgba(255,255,255.75); width:45px; height:45px;

                      border: 3px solid #35405A; border-radius: 10px; padding: 7px;"

                              src="png/webdev.png" alt="Website Development">Web Dev</img>

                  </xsl:if >

                  <object hspace="20" style="font-weight: bold;"><xsl:value-of select="name()"/></object>

                  <object align="right" style="font-weight: bold;"><xsl:value-of select="Date"/></object>

              </a>

            </h4>

          </div>

          <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                <div>Event details go here</div>

                <br></br>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Sponsor: </span><xsl:value-of select="Sponsor"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Image: </span><xsl:value-of select="Image"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Description: </span><xsl:value-of select="Description"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Address: </span><xsl:value-of select="Location/Address"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Room: </span><xsl:value-of select="Location/Room"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">Time: </span><xsl:value-of select="Time"/></div>

                <div><span style="color:Black; font-weight:1000; text-shadow: 1px 1px 2px grey;">RSVP: </span><xsl:value-of select="RSVP_Link"/></div>

                <div>



                    <script type="text/javascript">

                        function initMap() {

                            var location = {lat: "&lt;xsl:value-of select="Location/Coordinates/LAT" disable-output-escaping="yes"/>",

                                            lng: "&lt;xsl:value-of select="Location/Coordinates/LON" disable-output-escaping="yes"/>"};

                            var map = new google.maps.Map(document.getElementById('map'), {

                                zoom: 16,

                                center: location

                                });

                            var marker = new google.maps.Marker({

                                position: location,

                                map: map

                            });

                        }

                    </script>

                    <script async="async" defer="defer"

                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJQ0BsjJqHv3AoJc35A&amp;callback=initMap">

                    </script>

                </div>

            </div>

          </div>

        </div>

        </xsl:for-each>

      </div>



    </div>



</body>

</html>

</xsl:template>

</xsl:stylesheet>

javascript html xml xslt

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

edited Nov 16 at 15:54

asked Nov 16 at 0:27

Joshua Martinez

asked Nov 16 at 0:27

Joshua Martinez

asked Nov 16 at 0:27

Joshua Martinez

If you don't mind ES6 you can use backticks
– Abana Clara
Nov 16 at 0:31

What is the problem? You have provided a snippet of XSLT. What does your XML look like, and why is the output not meeting your expectations? Can you provide a snippet of the current output and describe why it isn't meeting your expectations?
– Mads Hansen
Nov 16 at 3:34

Shouldn't your lat and lng properties be numbers? Why wrap with quotes and make them strings?
– Mads Hansen
Nov 16 at 3:40

Just added the XSL file, They are integers. Originally they weren't wrapped in quotes. I came across a solution that corrected the issues with quotes but apparently, it was a different issue.
– Joshua Martinez
Nov 16 at 4:04

The Javascript code new google.maps.Map(document.getElementById('map') only makes sense if there is an HTML element with an id="map" attribute somewhere, I don't find it. And obviously if you want to create several maps then you will have to set up several elements with different id values and adjust the Javascript.stackoverflow.com/questions/52521343/… might help although I am not sure it solves the same problem, you will need to elaborate on whether you want to have several maps visible in several HTML elements at the same time.
– Martin Honnen
Nov 16 at 10:32

add a comment |

If you don't mind ES6 you can use backticks
– Abana Clara
Nov 16 at 0:31

What is the problem? You have provided a snippet of XSLT. What does your XML look like, and why is the output not meeting your expectations? Can you provide a snippet of the current output and describe why it isn't meeting your expectations?
– Mads Hansen
Nov 16 at 3:34

Shouldn't your lat and lng properties be numbers? Why wrap with quotes and make them strings?
– Mads Hansen
Nov 16 at 3:40

Just added the XSL file, They are integers. Originally they weren't wrapped in quotes. I came across a solution that corrected the issues with quotes but apparently, it was a different issue.
– Joshua Martinez
Nov 16 at 4:04

The Javascript code new google.maps.Map(document.getElementById('map') only makes sense if there is an HTML element with an id="map" attribute somewhere, I don't find it. And obviously if you want to create several maps then you will have to set up several elements with different id values and adjust the Javascript.stackoverflow.com/questions/52521343/… might help although I am not sure it solves the same problem, you will need to elaborate on whether you want to have several maps visible in several HTML elements at the same time.
– Martin Honnen
Nov 16 at 10:32

If you don't mind ES6 you can use backticks
– Abana Clara
Nov 16 at 0:31

What is the problem? You have provided a snippet of XSLT. What does your XML look like, and why is the output not meeting your expectations? Can you provide a snippet of the current output and describe why it isn't meeting your expectations?
– Mads Hansen
Nov 16 at 3:34

Shouldn't your lat and lng properties be numbers? Why wrap with quotes and make them strings?
– Mads Hansen
Nov 16 at 3:40

Just added the XSL file, They are integers. Originally they weren't wrapped in quotes. I came across a solution that corrected the issues with quotes but apparently, it was a different issue.
– Joshua Martinez
Nov 16 at 4:04

The Javascript code new google.maps.Map(document.getElementById('map') only makes sense if there is an HTML element with an id="map" attribute somewhere, I don't find it. And obviously if you want to create several maps then you will have to set up several elements with different id values and adjust the Javascript.stackoverflow.com/questions/52521343/… might help although I am not sure it solves the same problem, you will need to elaborate on whether you want to have several maps visible in several HTML elements at the same time.
– Martin Honnen
Nov 16 at 10:32

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329740%2funescaped-xml-character-when-assigning-value-to-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky