Waygo Documentation

Integrate powerful interactive floor maps into your solutions.

Documentation for all Waygo APIs, client libraries and more. Turn your floor plans into interactive maps, integrate any of your business data, and build custom mapping experiences to fit your business needs.

To begin using Waygo maps in your solutions, you'll first need and start building your own maps. To get started, please contact us to set up an account.

Embed a map into a webpage or web app

After you've built your first map, the simplest way to embed it into a webpage or web-based mobile app is by using an <iframe> component. Customize the following Waygo Map <iframe> Component, then add it to your webpage's HTML body.

Waygo map iframe component

<iframe 
  src="https://maps.waygomaps.com
        /MAP_ID
        /MAP_VIEW_ID                               <-- (optional)
        /f{FLOOR_INDEX}@{ZOOM},{PITCH},{BEARING}   <-- (optional)
  allowfullscreen
  allow="clipboard-write"
  loading="lazy"
  style="border: none; border-radius: 22px;"
  width="950"
  height="650">
</iframe>
View full example: Embed a map into a webpage with iframe

MAP_ID is required, but MAP_VIEW_ID is only needed if you're loading a non-default Map View for the Map that you're loading. FLOOR_INDEX, ZOOM, PITCH and BEARING are all optional - only include these if you want the map to open to any non-default floor or state. Additionally, the tag allow="clipboard-write" is required for the for the 'Share' button to properly copy the map's state to clipboard, when selected.

If you'd like to embed a Waygo map into a native mobile app, you can use a native WebView component to add the map to your app. The Waygo Map SDK for iOS and Android are currently under development.

Build custom mapping experiences with Waygo.js

If your solution requires custom interactivity or integration with your own UI controls, for example a ticketing or booking process, warehouse management systems, or custom wayfinding inputs, then you'll be better off using Waygo.js to create your own customized mapping experience.

Start building with Waygo.js

Example: Embed map with iframe

This complete example shows how to embed a map into any web application using an <iframe> component.

(HTML) Embed a map into a webpage with iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Test Page</title>
    <style>
        .iframe-container {
            display: flex;
            justify-content: center;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>IFrame Test Page</h1>
    <div class="iframe-container">
        <iframe 
            src="https://maps.waygomaps.com/expo-expo-2024/PmemisplTIOErumFETKoYw/f0@-0.049573,-0.016142,12.15,46.00,-25.00"
            allowfullscreen
            loading="lazy"
            style="border: none; border-radius: 22px;"
            width="950"
            height="650">
        </iframe>
    </div>
</body>
</html>

Resources

Waygo.js

Build customized mapping experiences with your own map data.

API Reference

Full API reference for all Waygo APIs.

Examples

Example integrations and code snippets for Waygo maps.