Search Defaults & Prompt

This sample shows how to customize the default search terms that appear when the user clicks on the search bar.

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.

Specify the default search terms & prompt in the config

Add the "defaultSearchTerms" key to the config as shown below and set as its value an array of search terms. (lounge and check-in in this example) you would like to appear. You can also set a custom placeholder prompt for the search bar using the "searchPlaceholder" param as shown below:

<!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,
				defaultSearchTerms: ["lounge", "check-in"],
        searchPlaceholder: "Search here"
			}

			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>

Try it out

See a live preview here. When you click on the search bar, it will show the custom default search terms you specified as shown in the following image: