MapQuest.js

L.mapquest.geocodingControl(options)

A control that adds interactive geocoding functionality to the map. Geocoded locations will have markers set to their locations. If enabled, the Search Ahead API will provide predictive results based on the provided input.

The escape key can be pressed when the control is open to close the control, unless the keepOpen option is true.

The up arrow and down arrow keys can be used to scroll through the list of Search Ahead API results. Pressing enter will select that result.

Syntax

L.mapquest.key = 'KEY';

var map = L.mapquest.map('map', {
  center: [39.7392,-104.9903],
  layers: L.mapquest.tileLayer('map'),
  zoom: 12
});

map.addControl(L.mapquest.control());
map.addControl(L.mapquest.geocodingControl({
  position: 'topleft'
}));

Parameters

  • options object

    An object containing any of the following key value options: className, closeResultsOnClick, compactResults, geocodingOptions, keepOpen, marker, placeholderText, placeMarker, pointZoom, position, removePreviousMarker, searchAhead, and searchAheadOptions.

    • className String optional

      A custom CSS class name to assign to the control.

    • closeResultsOnClick Boolean optional, defaults to true.

      Determines if Search Ahead results should automatically close when a result is selected.

    • compactResults Boolean optional, defaults to false.

      Determines if a compact version of Search Ahead results should be used.

    • geocodingOptions Object optional

      Options to be passed into the Geocoding API.

      Any Request Parameters of the Geocoding API are valid options.

    • keepOpen Boolean optional, defaults to false.

      Determines if input field of the control should remain open after a geocode.

    • marker Object optional

      An object containing any of the following key value options: icon and iconOptions.

      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, shadow, size, and symbol.

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

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

      • shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.

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

      • symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.

    • placeholderText String optional, defaults to Search

      A string that is the placeholder text rendered inside the input field of the control.

    • placeMarker Boolean optional, defaults to true

      A boolean that determines whether a marker is placed on the map when a result is selected or geocoded.

    • pointZoom Number optional

      A number between 0 and 20 that sets the zoom level of the map when a result is selected or geocoded. Overrides the default zoom behavior, which is calculated based on the geocode quality code or search ahead result type.

    • position String optional, defaults to 'topleft'

      The position of the control (one of the map corners).

      Possible values are 'topleft', 'topright', 'bottomleft' or 'bottomright'.

    • removePreviousMarker Boolean optional, defaults to false

      A boolean that determines whether the previous marker is removed from the map when a new result is selected or geocoded. By default, markers stay on the map.

    • searchAhead Boolean optional, defaults to true.

      Determines if the Search Ahead functionality should be enabled on the control.

      If L.mapquest.open is set to true, this feature will automatically be disabled.

    • searchAheadOptions Object optional

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

      Any Request Parameters of the Search Ahead API are valid options.

      If the location parameter is not set in this object, Search Ahead results will be based on the current map center.

    Example

    {
  className: '',
  closeResultsOnClick: true,
  compactResults: false,
  geocodingOptions: {},
  keepOpen: false,
  marker: {
    icon: 'marker',
    iconOptions: {},
  },
  placeholderText: 'Search',
  placeMarker: true,
  pointZoom: '',
  position: 'topleft',
  removePreviousMarker: false,
  searchAhead: true,
  searchAheadOptions: {
    limit: 6,
    collection: 'address,adminArea,airport,poi',
    location: '',
    countryCode: '',
  }
}

Return Value

An L.Control object that can be added to a map with the addControl() function.

Events

  • searchahead_response Event

    A searchahead_response event is fired when a Search Ahead API request is made. The Search Ahead API response object is returned.

    Example

    geocodingControl.on('searchahead_response', function(eventResponse) {
  console.log(eventResponse);
});

  • searchahead_selected Event

    A searchahead_selected event is fired when a user selects a specific Search Ahead result. The Search Ahead API response result object is returned.

    Example

    geocodingControl.on('searchahead_selected', function(eventResponse) {
  console.log(eventResponse);
});

  • geocode_response Event

    A geocode_response event is fired when a Geocoding API request is made. The Geocoding API response object is returned.

    Example

    geocodingControl.on('geocode_response', function(eventResponse) {
  console.log(eventResponse);
});

Visual Example