Web v4 - Getting Started - Search - Manually - Google Maps

by MapsPeople

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapsIndoors</title>
  <script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.5.1/mapsindoors-4.5.1.js.gz?apikey=d876ff0e60bb430b8fabb145"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 600px;"></div>
  
  <input type="text" placeholder="Search">
  <button onclick="onSearch()">Search</button>
  
  <ul id="search-results"></ul>
</body>
</html>

JavaScript

const mapViewOptions = {
  element: document.getElementById('map'),
  center: { lat: 38.8974905, lng: -77.0362723 }, // The White House
  zoom: 17,
  maxZoom: 22,
};
const mapViewInstance = new mapsindoors.mapView.GoogleMapsView(mapViewOptions);
const mapsIndoorsInstance = new mapsindoors.MapsIndoors({ mapView: mapViewInstance });
const googleMapsInstance = mapViewInstance.getMap();

// Floor Selector
const floorSelectorElement = document.createElement('div');
new mapsindoors.FloorSelector(floorSelectorElement, mapsIndoorsInstance);
googleMapsInstance.controls[google.maps.ControlPosition.RIGHT_TOP].push(floorSelectorElement);

function onSearch() {
  const searchInputElement = document.querySelector('input');
  const searchResultsElement = document.getElementById('search-results');

  const searchParameters = { q: searchInputElement.value };
  mapsindoors.services.LocationsService.getLocations(searchParameters).then(locations => {
		// Reset search results list
    searchResultsElement.innerHTML = null;

    // Append new search results
		locations.forEach(location => {
			const listElement = document.createElement('li');
			listElement.innerHTML = location.properties.name;
			searchResultsElement.appendChild(listElement);
		});
    
    // Filter map to only display search results
    mapsIndoorsInstance.filter(locations.map(location => location.id), false);
	});
}