Source: map-google-maps/src/main/resources/META-INF/resources/js/GoogleMapsSearch.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import {isInputNode} from 'map-common/js/validators.es';
  16. import State, {Config} from 'metal-state';
  18. /**
  19.  * GoogleMapsSearch
  20.  * @review
  21.  */
  22. class GoogleMapsSearch extends State {
  24. 	/**
  25. 	 * Creates a new search handler using Google Map's API
  26. 	 * @param  {Array} args List of arguments to be passed to State
  27. 	 * @review
  28. 	 */
  29. 	constructor(...args) {
  30. 		super(...args);
  31. 		const inputNode = this.inputNode;
  32. 		this._handlePlaceChanged = this._handlePlaceChanged.bind(this);
  34. 		this._autocomplete = new google.maps.places.Autocomplete(inputNode);
  35. 		this._bindUI();
  36. 	}
  38. 	/**
  39. 	 * Removes the listeners that have been added to the search input.
  40. 	 * @review
  41. 	 */
  42. 	destructor() {
  43. 		this._eventHandlers.forEach((item) => {
  44. 			google.maps.event.removeListener(item);
  45. 		});
  46. 	}
  48. 	/**
  49. 	 * Adds listeners for the created map object.
  50. 	 * It listens for a custom 'place_changed' event and executes
  51. 	 * GoogleMapsSearch._handlePlaceChanged.
  52. 	 * @protected
  53. 	 * @review
  54. 	 */
  55. 	_bindUI() {
  56. 		this._eventHandlers = [
  57. 			google.maps.event.addListener(
  58. 				this._autocomplete,
  59. 				'place_changed',
  60. 				this._handlePlaceChanged
  61. 			),
  62. 			google.maps.event.addDomListener(
  63. 				this.inputNode,
  64. 				'keydown',
  65. 				(event) => {
  66. 					if (event.keyCode === 13) {
  67. 						event.preventDefault();
  68. 					}
  69. 				}
  70. 			),
  71. 		];
  72. 	}
  74. 	/**
  75. 	 * Gets the new place that has been processed by Google Maps and emits a
  76. 	 * 'search' event with the location information and the address.
  77. 	 * @protected
  78. 	 * @review
  79. 	 */
  80. 	_handlePlaceChanged() {
  81. 		const place = this._autocomplete.getPlace();
  83. 		if (place && typeof place === 'object' && place.geometry) {
  84. 			const geolocation = place.geometry.location;
  86. 			this.emit('search', {
  87. 				position: {
  88. 					address: place.formatted_address,
  89. 					location: {
  90. 						lat: geolocation.lat(),
  91. 						lng: geolocation.lng(),
  92. 					},
  93. 				},
  94. 			});
  95. 		}
  96. 	}
  97. }
  99. /**
  100.  * State definition.
  101.  * @review
  102.  * @static
  103.  * @type {!Object}
  104.  */
  105. GoogleMapsSearch.STATE = {
  107. 	/**
  108. 	 * Input element that will be used for searching addresses.
  109. 	 * @review
  110. 	 * @type {HTMLInputElement}
  111. 	 */
  112. 	inputNode: Config.validator(isInputNode).value(null),
  113. };
  115. export default GoogleMapsSearch;
  116. export {GoogleMapsSearch};