CODEWITHSUNDEEP
mapbox-gl-jsmapbox-marker
Nick Wiltshire
Nick Wiltshire

Reputation: 745

Getting error this._mapboxgl.Marker is not a constructor when using geocoder

I've got a fairly basic setup testing the Geocode search function, but I receive this error any time a search is completed.

I've checked my version numbers and as far as I can tell they are up to date. I've unbundled them for testing different versions.

https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js

import Mapbox from 'mapbox-gl';
import Geocoder from 'mapbox-gl-geocoder';

Mapbox.accessToken = 'pk.mytokenishere';
  let map = new Mapbox.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: {lon: -113.8116, lat: 52.26682},
  zoom: 4
  });

  var geocoder = new Geocoder({
    accessToken: Mapbox.accessToken,
    mapboxgl: map,
    marker: {
      color: 'orange'
      },
    }); 
  document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

Instead of an orange marker, I get this._mapboxgl.Marker is not a constructor

Upvotes: 1

Views: 2456

Answers (2)

M_M003
M_M003

Reputation: 1

I had the same error with angular and TS, I solved it by omitting mapboxgl.

In my case because i using angular:

 const geocoder = new MapboxGeocoder({
          accessToken: mapboxgl.accessToken,
          marker: new mapboxgl.Marker({
            color: 'orange'
          }),
    })

Upvotes: 0

Nick Wiltshire
Nick Wiltshire

Reputation: 745

I was able to figure it out on my own. The geocoder is expecting the Mapbox class itself and not an instance. The above code should be changed to:

var geocoder = new Geocoder({
  accessToken: Mapbox.accessToken,
  mapboxgl: Mapbox,
  marker: {
    color: 'orange'
    },
});

Upvotes: 4

Related Questions