title: How to load script in specific page in gatsby
body: <p><strong>Hello.</strong></p>
  <p>I recently got stuck with pretty important thing on my gatsby site. <br />
  I have to import script from other site cause it is providing map widget. This is the widget from polish delivery company and it is only available under link <a href="https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js" rel="nofollow noreferrer">https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js</a>.</p>
  <p>It is activated by a function <code>window.PPWidgetApp.toggleMap()</code>. Problem is when i try to activate, <strong>html</strong> and <strong>css</strong> markup from widget are showing but map coming from <strong>js</strong> it is not. <br /> <br /></p>
  <p>Here is how I'm loading the script: <br /></p>
  <pre><code>{
    resolve: &quot;gatsby-plugin-load-script&quot;,
    options: {
      src:
        &quot;https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js&quot;,
    },
  },
  </code></pre>
  <p>When I'm on specific route where I'm using this widget and i refresh the page everything is working properly. So I'm guessing problem is that when this script is loaded in index it gets cached somehow by gatsby and most of the important features are not working. So can I load the script only when I'm on let's say route <code>/delivery</code> ? Or is there another, better way to load this script that may work fine ?
  <br />
  <br />
  Link to github repo with this problem: <a href="https://github.com/Exanderal/gatsby-problem" rel="nofollow noreferrer">https://github.com/Exanderal/gatsby-problem</a></p>