How to pass parameters to Google Maps initmap in X

Question

I'm trying to get the position by getting the latitude and longitude from an xml document, through an xslt stylesheet. I made xslt variables which return the correct latitude and longitude when I call them (for example with xsl:value-of). But I can't seem to access the same variables in the javascript snipet. From what I read it's possible to call an xslt variable inside javascript. So I don't know what I'm doing wrong.

Here is my code:

                                        <xsl:for-each-group select="MBMDVRs/LocatorInfo" group-by="string-join((LocationAddr/StreetNum, ' ', LocationAddr/StreetName, ' ', LocationAddr/City, ' ', LocationAddr/StateProv, ' ', LocationAddr/PostalCode), '!')">
                                                <tr style="border-collapse:collapse; font-size:inherit; text-align:center; " class="wide">
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:0.95in; ">
                                                    </td> 
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:2.57in; "> 
                                        <xsl:value-of select="LocationAddr/StreetNum, ' ',  LocationAddr/StreetName, ' ', LocationAddr/mbg:City,  ' ' , LocationAddr/StateProv, LocationAddr/PostalCode" />&#160;&#160;


                                <xsl:variable name="Latitude" select="LocationAddr/GEOCode/mbg:Latitude"/>
                                <xsl:variable name="Longitude" select="LocationAddr/mbg:GEOCode/Longitude"/>
                                <script>
                            function initMap(){
                                var location = {lat: parseFloat("<xsl:value-of select="$Latitude"/>"), 
                                lng: parseFloat("<xsl:value-of select="$Longitude"/>")};
                                var map = new google.maps.Map(document.getElementById("map"), {zoom: 15, center: location

                            });
                            var marker = new google.maps.Marker({
                            position: location, 
                            map: map
                            });
                    }
                            </script>
                                                        <a href="#" onclick="initMap()">Street View</a>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:1.82in; "> 
                                                        <xsl:copy-of select="(//LocationTimestamp)[last()]"/>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:1.82in; ">
                                                        <xsl:copy-of select="(//LocationTimestamp)[1]"/>
                                                    </td>
                                                    <td class="rownr{(position() + 1) mod 2}" style="width:2.27in; ">
                                                         <xsl:value-of select="count(current-group())" />
                                                    </td>
                                                </tr>
                                                   </xsl:for-each-group>
                                    </tbody>
                                </table>

I'm trying to display the result in this div:

And use this link:

And use this xml:

<LocatorInfo>
    <LocationAddr>
      <StreetNum>187</StreetNum>
      <StreetName>Eastern Avenue</StreetName>
      <City>Fall River</City>
      <StateProv>MA</StateProv>
      <PostalCode>02723</PostalCode>
      <Country>USA</Country>
      <GEOCode>
        <Latitude>41.694600119635915</Latitude>
        <Longitude>-71.13038416718094</Longitude>
      </GEOCode>
    </LocationAddr>
    <LocationTimestamp>4/7/2018 7:00:03 AM</LocationTimestamp>
    <LocationDistance>4.338 miles</LocationDistance>
    <Accuracy>1.985 miles</Accuracy>
  </LocatorInfo>

Answer 1

I think you need to change your Javascript code to have a function you can call to create the appropriate map and marker, so outside of any grouping you put

            <script>
            function showMap(targetElement, location) {
              var map = new google.maps.Map(targetElement, { zoom: 15, center: location });
              var marker = new google.maps.Marker({
                position: location, 
                map: map
              });
            }
            </script>

then inside of your grouping you use

 <a href="#" onclick="showMap(document.getElementById('map'), {{ lat: {GEOCode/Latitude}, lng: {GEOCode/Longitude} }}); return false;">Street View</a>

that should solve the problem I think, in terms of interaction of XSLT and generated script code in an HTML document.

I don't know whether it would be easier/faster to not use new google.maps.Map each time the function is called and instead perhaps only move the center and the marker (or delete the existing marker and create a new) in an initially created map, but here is how you would implement that first script block instead:

            <script>
            var map = null;
            var marker = null;

            function showMap(targetElement, location) {
              if (map != null) {
                  map.setCenter(location);
                  marker.setPosition(location);
              }
              else {
                  map = new google.maps.Map(targetElement, { zoom: 15, center: location });
                  marker = new google.maps.Marker({
                    position: location, 
                    map: map
                  });
              }
            }
            </script>