Fullscreen Map

This sample shows how to load a fullscreen version of the map, along with all the control overlays like search, directions, poi info, levels, zoom and more.

Organizing your code

The Getting Started section details various SDK installation options depending on your requirements. The sample code below is based on a base use case of a plain html page and the ES6 module format.

Instantiate the SDK & Load the Map

Add the following code to your main html file, replacing the venueId and accountId fields with those applicable to you:

<!DOCTYPE html>
<html lang="en">

	<head>
		<script type="module">

			import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

			const config = {
				venueId: 'lax',
				accountId: 'A11F4Y6SZRXH4X',
				headless: false
			}

			window.LMInit = LMInit
			LMInit.setLogging(true)
			LMInit.newMap('.mymap', config)
				.then(m => { window.map = m;})
				.catch(e => console.error('Error initializing map: ', e))

		</script>
		<style>
			html, body, .mymap {
				height: 100%; margin: 0; padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mymap" style="height: 100%;"></div>
	</body>

</html>

It is critical that the SDK is initialized with the correct div class or identifier so that the SDK can load the map in the appropriate place.

Try it out

See a live preview here. The map will appear similar to the following image: