Zooming the map while geocoding

In this example, we will demonstrate how to combine the suggestion feature with the ability to display the selected result on the map. The suggestion tool returns the location of the selected entity, enabling you to easily place a marker on the map and zoom into the specific location.

However, zoom levels may vary depending on the type of entity. For point entities (e.g., addresses), closer zooming is required, while for regional entities (e.g., cities, states), a wider view is more appropriate.

For this purpose, the newly added BBox (Bounding Box) parameter, returned by the suggestion and geocoding functions, is used. The BBox represents a rectangle encompassing the entire entity found. In the map library, it can be easily utilized to set the correct zoom level.

Try searching and clicking on addresses, streets, cities, or states in the example. Upon clicking, the map will not only zoom but also visually highlight the returned BBox (this highlighting is intended for demonstration purposes only and is not typically used in practice).

In this example, we are again using the autoComplete.js component.