Load a map with Waygo.js
To begin creating a custom mapping experience with Waygo.js in your web app, you'll need to first load one of your maps into your project. If you don't yet have an account, please contact us to set up an account.
The simplest approach to embedding a map into a web app is by using an <iframe> component, which provides the standard Waygo map experience (this alone is adequate for most use cases).
If you'd like to create custom mapping experience using Waygo maps, such as using your own UI map controls, customizing run-time styling, or adding your own custom interactivity, you'll be better off using Waygo.js to meet your needs.
Example: Load a map into a webpage with Waygo.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Embedded Map Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/waygo-maps@1.1.9/dist/style.css">
<script src="https://cdn.jsdelivr.net/npm/waygo-maps@1.1.9/dist/bundle.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
</style>
</head>
<body>
<div id="map"></div>
<script>
waygomaps.setApiKey("23rh24f3UHR2Hadsoijj1w32i2Rr3h3lhL2k343l420dcaa");
const map = new waygomaps.MapView({
container: 'map',
sourceId: 'c9d01414d1594f12b50d90bac9d4b3fb.expo-expo-2024.PmemisplTIOErumFETKoYw',
defaultControls: true,
});
</script>
</body>
</html>