How set marker on click when map load - Mapbox GLJS

Question

I've made a MapBox for get Current Coordinate for Gmaps :

mapboxgl.accessToken ='pk.eyJ1IjoibW5hdWZhbGF6a2lhIiwiYSI6ImNrcWV4MzN0ZDA2NjQyd2xrazhhbG96eHMifQ.3R_B2O8m_CQ_tERmmji8mA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [107.138013,-6.814071],
        zoom: 13,
    });
    
    // Add the control to the map.
    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        marker: false,
        mapboxgl: mapboxgl
    });

document.getElementById('geocoder').appendChild(geocoder.onAdd(map));


geocoder.on('result', function(r) {
    document.getElementById("maps").value = r.result.center;
    var reverse = document.getElementById("maps").value;
    reverse = reverse.split(",");
    var latitude = reverse[1];
    var longitude = reverse[0];
    document.getElementById("maps").value = latitude + "," + longitude;
  
    var marker1 = new mapboxgl.Marker({ draggable: false, color: "blue" })
    .setLngLat(r.result.center)
    .addTo(map);
    map.flyTo({
    center: r.result.center,
    zoom:15,
    speed:5,
    });
    map.on('click', function(e) {
            var coordinates = e.lngLat;
        var popup = new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML('MapBox Coordinate<br/>' + coordinates)
        .addTo(map);
        marker1.setLngLat(coordinates)
        marker1.setPopup(popup)
        map.flyTo({
        center: coordinates,
        zoom:15,
        speed:5,
        });
      document.getElementById("maps").value = coordinates;
      var lokasi = $('#maps').val().replace(/[^0-9,.-]/ig, "");
      $('#maps').val(lokasi);
      var reverse = document.getElementById("maps").value;
      reverse = reverse.split(",");
      var latitude = reverse[1];
      var longitude = reverse[0];
      document.getElementById("maps").value = latitude + "," + longitude;
          });
});

$('#modalrubahlokasi').on('shown.bs.modal', function() {
    map.resize();
});

document.querySelector('.mapboxgl-ctrl-geocoder input').placeholder = "Search Location Here";

Here's codepen links : https://codepen.io/mnaufalazkia/pen/wvdwmoY

But I can't set marker when i click the map before i've search the location first.

But i've tried map.on('load' function and add map.on('click' for map load function for set marker, but not working properly. but when i search the location first, and click the maps, the marker working properly.

Someone can help me to add marker when i click the map, just like when i search the location first, but of course remove the previous marker. Thank You

Answer 1

A lot of the following suggestions came from retooling of these resources:

• https://github.com/mapbox/mapbox-gl-js/issues/9209
• https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker#remove
• https://docs.mapbox.com/mapbox-gl-js/example/popup/
• https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker-example
• https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/

You can achieve setting a marker when you click the map before searching the location by adding markers to the map independently of the geocoder after the map has been initialized by:

 map.on('click', function add_marker (event) { var coordinates = event.lngLat; console.log('Lng:', coordinates.lng, 'Lat:', coordinates.lat), 'id', event.id; marker.setLngLat(coordinates).addTo(map); // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360; } var popup = new mapboxgl.Popup({ offset: 35 }) .setLngLat(coordinates) .setHTML('MapBox Coordinate<br/>' + coordinates) .addTo(map) })

Then you can handle your popups within your geocoder to close out when you click away. There isn't a need to call a map.on('click') again here.

 geocoder.on('result', function(r) { document.getElementById("maps").value = r.result.center; var reverse = document.getElementById("maps").value; var latitude = reverse[1]; var longitude = reverse[0]; document.getElementById("maps").value = latitude + "," + longitude; var marker1 = new mapboxgl.Marker({ draggable: false, color: "blue"}) .setLngLat(r.result.center) .addTo(map); map.flyTo({ center: r.result.center, zoom:15, speed:5, }) new mapboxgl.Popup({offset: 35, closeOnClick: true}) .setLngLat(r.result.center) .setHTML('MapBox Coordinate<br/>' + r.result.center) .addTo(map); map.on('click', function(){ marker1.remove(); }) });

Here is a working example in a jsfiddle: https://jsfiddle.net/jameslcarpino/gchsvoxL/1/