CODEWITHSUNDEEP
javascripthtmlmapboxmapbox-gl-jsgeocoder
Carmen B.
Carmen B.

Reputation: 349

undefined error converting an address into coordinates with Mapbox geocoder

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
    }
    
  });
document.getElementById('geocode_container').appendChild(geocoder.onAdd(map));
    #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;
    }
.mapboxgl-ctrl-geocoder--input:focus{
    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)
    {
            .mapboxgl-ctrl-geocoder 
            {
                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-->
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" /></head>
<body>
<div id="map"></div>


<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
</body>
</html>

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.

Upvotes: 0

Views: 1201

Answers (2)

Shahul Hameed
Shahul Hameed

Reputation: 51

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

ex:

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

Upvotes: 1

AndrewHarvey
AndrewHarvey

Reputation: 3065

According to the API docs https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#mapboxgeocoder

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 https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on

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

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

Upvotes: 0

Related Questions