MapQuest.js

L.mapquest.searchControl(options)

A control that allows for drop-in Place Search API functionality.

Syntax

L.mapquest.key = 'KEY'; let map = L.mapquest.map('map', { center: [40.7128, -74.0059], layers: L.mapquest.tileLayer('map'), zoom: 14, zoomControl: false }); let searchControl = L.mapquest.searchControl({ className: '', hoverMarker: { icon: 'marker', iconOptions: { size: 'sm', primaryColor: '#333333', secondaryColor: '#333333' } }, search: { sort: 'relevance', pageSize: 20 }, searchInput: { searchAheadOptions: { limit: 6, collection: 'address,adminArea,airport,poi,category,franchise' }, compactResults: true, placeholderText: 'Search', clearTitle: 'Clear search' }, searchLayer: { buffer: 256, collisionMargin: 2, marker: { icon: 'via', iconOptions: { primaryColor: '#ffffff', secondaryColor: '#333333', size: 'lg' }, popupEnabled: true }, paddingTopLeft: [420, 20], paddingBottomRight: [20, 20], searchResponse: {}, updateResultsOnMapMove: true } }).addTo(map);

Parameters

  • controlOptions optionalObject

    An object containing key value options for the search control.

    • className Stringoptional

      A custom CSS class name to assign to the control.

    • hoverMarker Objectoptional

      An object containing any of the following key value options: icon and iconOptions. This controls the marker that is rendered when search results are selected in the result list.

      icon: A string that specifies the type of icon to be rendered. Default is 'marker'.

      iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, and size.

      • primaryColor: The string hex code primary color of the marker.

      • secondaryColor: The string hex code secondary color of the marker.

      • size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.

    • searchLayer Objectoptional

      An object containing key/values that control the look and feel of the search Layer.

    • searchInput Objectoptional

      An object containing key/values that control the look and feel of the search input.

      compactResults: A boolean that determines if the search input search ahead results are compact. Default is true.

      clearTitle: A string that controls the search input title. Default is 'Clear search'.

      placeholderText: A string that controls the search input placeholder text. Default is 'Search'.

      searchAheadOptions: Options to be passed into the Search Ahead API if it is enabled.

Basic Example

 let searchControl = L.mapquest.searchControl().addTo(map);
close