Can I embed the RealTime live map on my transit agency's website?

Absolutely! Follow the steps below!

  1. Head over to http://demo.transloc.com/info/embed. Replace demo with your agency's slug (e.g. demo for demo.transloc.com)
  2. Read and follow the instructions:
    1. The special embedded version will expand to fit your page, letting your riders see as much as possible. Minimum map dimensions are 600 pixels wide by 500 pixels high.
      If your page does not have a white background, begin by inserting this into your page (replace the value for transloc_bgcolor with your HEX color):
      <script type="text/javascript">
      var transloc_bgcolor = 'EEEBE2';
      </script>
    2. Finally, insert the following HTML code into your page (below the prior code if you inserted it):​
      <!-- TransLoc Real-Time Tracking - DO NOT EDIT BELOW -->
      <script src="http://demo.transloc.com/embed.js" type="text/javascript"></script>
      <noscript>
      Track your ride online with the TransLōc Real-Time Tracking app.  See in real-time where all vehicles are.<br />
      Choose your map mode:
      <a href="http://demo.transloc.com" title="The live location map">TransLōc Real-Time Tracking</a> |
      <a href="http://demo.transloc.com/info/mobile" title="TransLōc Tracking for your mobile phone">Mobile Access</a> |
      <a href="http://demo.transloc.com/t/" title="An accessible Tracking app">Text Version</a> |
      <a href="http://demo.transloc.com/announcements/" title="Read announcements that are impacting service">Announcements</a>
      </noscript>
      <!-- TransLoc TVS - DO NOT EDIT ABOVE -->
  3. Again, remember to replace demo with your agency's slug.
  4. Please contact us at support@transloc.com if you have any questions or require assistance.

Did you find this article helpful?