Skip to content

Instantly share code, notes, and snippets.

@zacharysyoung

zacharysyoung/directions.html

Last active April 17, 2025 02:01
Show Gist options
  • Save zacharysyoung/dd640503bb289d7e90c1749fdd234248 to your computer and use it in GitHub Desktop.
Save zacharysyoung/dd640503bb289d7e90c1749fdd234248 to your computer and use it in GitHub Desktop.
Download ZIP
Process step-by-step directions from Google Maps
Raw
directions.html
<div class="S0JAMb">
<div
class="gHCNqf"
data-groupindex="0"
data-pathindex="0"
data-rapid="step_rap_0_0_0"
data-stepindex="0"
jsaction="focus:VeSUMc; blur:eYpYpd; mouseover:VeSUMc; mouseout:eYpYpd; click:d7sLvf; keydown:d7sLvf"
jslog="5952; track:click; mutable:true;metadata:WyIwYWhVS0V3ampwcUdmNXQyTUF4VzRNelFJSFlZQUVCVVE5aVFJQnlnQSJd"
>
<div class="fInDkc fontBodyMedium">
<div class="sYgOsc dir-tt dir-tt-straight" aria-hidden="true">
<img
alt=""
height="18"
width="18"
src="https://maps.gstatic.com/consumer/images/icons/2x/straight_grey800_18dp.png"
/>
</div>
<div role="button" tabindex="0" class="EfN6d A1m5Eb">
<div class="j3isMd">
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd">Head </span>
</span>
<span class="JxBYrc pk9Qwb" dir="ltr">Head </span>
</span>
</span>
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd PpN7xc cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd">north</span>
</span>
<span class="JxBYrc pk9Qwb PpN7xc" dir="ltr"
>north</span
>
</span>
</span>
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd"> on </span>
</span>
<span class="JxBYrc pk9Qwb" dir="ltr"> on </span>
</span>
</span>
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd PpN7xc cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd">NE 175th Ave</span>
</span>
<span class="JxBYrc pk9Qwb PpN7xc" dir="ltr"
>NE 175th Ave</span
>
</span>
</span>
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd"> toward </span>
</span>
<span class="JxBYrc pk9Qwb" dir="ltr">
toward
</span>
</span>
</span>
<span class="mjzU4e mTOalf" style="">
<span>
<span
class="Bzv5Cd PpN7xc cGU3ub ltr"
style="
display: none;
background-color: rgb(255, 255, 255);
"
>
<span class="cukLmd">NE 5th Cir</span>
</span>
<span class="JxBYrc pk9Qwb PpN7xc" dir="ltr"
>NE 5th Cir</span
>
</span>
</span>
</div>
</div>
<div
class="cQGekc Hk4XGb"
role="button"
tabindex="0"
jsaction="click:wqyFm; keydown:wqyFm"
data-jslog-delayed="140638; track:click; mutable:true;metadata:WyIwYWhVS0V3ampwcUdmNXQyTUF4VzRNelFJSFlZQUVCVVE5aVFJQnlnQSJd"
aria-label="Street View"
jslog="140638; track:click; mutable:true;metadata:WyIwYWhVS0V3ampwcUdmNXQyTUF4VzRNelFJSFlZQUVCVVE5aVFJQnlnQSJd"
>
<img
class="Sl8bjb"
alt=""
src="https://streetviewpixels-pa.googleapis.com/v1/thumbnail?panoid=gT1jglOxZq4EcO_RF-X6UQ&amp;cb_client=maps_sv.tactile.gps&amp;yaw=181.3116&amp;pitch=0&amp;thumbfov=100&amp;w=80&amp;h=80"
/>
<div class="GAQ2De">
<span
class="fz6XFb google-symbols G47vBd"
aria-hidden="true"
style="font-size: 20px"
>&#xE577;</span
>
</div>
</div>
</div>
<div class="OmiYAe">
<div class="XcO0tf" />
<div class="directions-mode-distance-time fontBodySmall">
354 ft
</div>
</div>
</div>
</div>
Raw
directions.xslt
<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/">
<html>
<head>
<style type="text/css">
td {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<table>
<xsl:apply-templates select="//div[@class='S0JAMb']" />
</table>
</body>
</html>
</xsl:template>
<xsl:template match="div[@class='S0JAMb']">
<tr>
<td align="right">
<xsl:value-of select="position()" />
</td>
<td>
<xsl:apply-templates select=".//span[@class='cukLmd']" />
</td>
<td>
<xsl:apply-templates select=".//div[@class='OmiYAe']" />
</td>
</tr>
</xsl:template>
<xsl:template match="span">
<xsl:value-of select="text()" />
</xsl:template>
<xsl:template match="div[@class='OmiYAe']">
<b>
<xsl:copy-of select=".//text()" />
</b>
</xsl:template>
</xsl:stylesheet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment