Solution 1 :

You need to return the [place_name] inside getItemValue method.


getItemValue: e => {
  document.getElementById('LocationLongitude_listingAdd').value = e['center'][0]; //long
  document.getElementById('LocationLatitude_listingAdd').value = e['center'][1]; //lat
  return e['place_name'];

Solution 2 :

According to the API docs

options.getItemValue Function? A function that specifies how the
selected result should be rendered in the search bar. This function
should accept a single Carmen GeoJSON object as input and return a
string. HTML tags in the output string will not be rendered. Defaults
to (item) => item.place_name.

In your example you’ve failed to return something from getItemValue hence it’s showing undefined.

However, it looks like you actually just want to listen to the result event

geocoder.on('result', (e) => {

and not actually change the formatting of suggestions which is what getItemValue does.

Problem :

I’m working with Mapbox geocoder services for the first time, and I was trying to get the coordinates (latitude and longitude) as result of address search and I did it, but when I try to insert this result into two inputs, the input search change the address selected to “Undefined” and I don’t now Why.
I want the coordinates into two input but also keep the selected address into the input search.
This is an image that shows the error:

enter image description here

This is the code I have Now:

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FybWVuOTIiLCJhIjoiY2s2cGljM3ZzMW1udjNlbnkxZmMzdXJ3ZCJ9.HJQPFlX5VUh6wlS18R3bFw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 9 // starting zoom
  var geocoder = new MapboxGeocoder({ // Initialize the geocoder
  accessToken: mapboxgl.accessToken, // Set the access token
  marker: {
    color: 'orange'
  mapboxgl: mapboxgl // Set the mapbox-gl instance
  getItemValue: e => {
  document.getElementById('LocationLongitude_listingAdd').value = e['center'][0]; //long
  document.getElementById('LocationLatitude_listingAdd').value = e['center'][1]; //lat
  document.getElementsByClassName('mapboxgl-ctrl-geocoder--input').value = e['place_name']; //lat
    #container_map{ position: relative; width: 100%; height: 400px;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; } 
.mapboxgl-ctrl-geocoder--input{min-width: 100%; width: 100%; border: 1px solid #DFE3E7 !important; border-radius: 0.267rem !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;}
 #map .mapboxgl-canvas-container canvas
        width: 100% !important;
        height: 400px !important;
    border-color: #5A8DEE !important;
    outline: 0 !important;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1) !important;

.coordinates-result input { display: inline-block; }

    @media screen and (min-width: 640px)
                width: 100% !important;
                font-size: 12px;
                line-height: 20px;
    .mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder .suggestions {
        box-shadow: none !important; 
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<!-- BEGIN: Head-->
<script src=""></script>
<link href="" rel="stylesheet" /></head>
<div id="map"></div>

<script src=""></script>
    <link rel="stylesheet" href="" type="text/css" />
    <script src="[email protected]/dist/es6-promise.min.js"></script>
    <script src="[email protected]/dist/"></script>

How Can I do to get the result coordinates of searching an address on Mapbox and keep the address and the coordinates into their inputs, because I’ll save that data on a database.