Places showing wrong (too many) results

We’re using Instantsearch (2.10.4) with a custom places widget to display on a map and also results beneath the map.

The places widget code is this:

var placesWidget = {
    init: function(opts){

        var container = document.querySelector('#IS__radius');
        var radius = document.querySelector('#radiusSlider');

        var placesAutocomplete = places({
            container: container,
			templates: {
				value: function(suggestion) {
					return suggestion.name;
				}
			}
        }).configure({
			type: 'city',
			aroundLatLngViaIP: false,
            useDeviceLocation: false,
		});;

        placesAutocomplete.on('change', function(e) {
            var location = e.suggestion;
            var lat = location.latlng['lat'];
            var lng = location.latlng['lng'];
			opts.helper.setQueryParameter('query', $('#IS__search').val());
            opts.helper.setQueryParameter('aroundLatLng', lat + ',' + lng);
            opts.helper.setQueryParameter('aroundRadius', parseInt($('#radiusSlider').val()));
            opts.helper.search();
        });

        container.addEventListener("input", onInputChange);
        function onInputChange(event) {
            if (event.currentTarget.value === "") {
                opts.helper.setQueryParameter("aroundLatLng");
                opts.helper.search();
            }
			if (event.currentTarget.value.length >= 2) {
				$('.searchbox__distri .rs__container').addClass('visible');
				$('.mapsContainer #hits').show();
			} else {
				$('.mapsContainer #hits').hide();
			}
        }

        $('button.ap-icon-clear').on('click', function(){
			$('.searchbox__distri .rs__container').removeClass('visible');
			$('.singleResult').slideUp(250).find('.viewer').html('');
            opts.helper.setQueryParameter("aroundLatLng");
            opts.helper.search();
        });

		enableRadiusSlider(opts);
    }
};

Initially, all markers seem to show correctly as well as the text results underneath the map. But the map results do not respect the places search input correctly, as you can see in this screenshot:

enter image description here

The 6 boxes below are correct, yet the map keeps showing way too many results (but not all).

The line within the render of the map (see below) params.helper.setQueryParameter('query', $('#IS__search').val()); should take care of that, I thought. Debugging it gives me the correct value which should be taken.

map = {
	_mapContainer: document.querySelector('#map-instantsearch-container'),
	markers: [],

	_hitToMarker: function(hit) {

		var icon = {
			url: 'typo3conf/ext/siteway/Resources/Public/Images/markerclusterer/basePin@2x.png',
			size: new google.maps.Size(39, 58),
			scaledSize: new google.maps.Size(39, 58)
		};

		var marker = new google.maps.Marker({
			position: {
				lat: hit._geoloc.lat,
				lng: hit._geoloc.lng
			},
			map: this._map,
			icon: icon,
			title: hit.company+' / '+hit.zip+' '+hit.city,
		});

		// trigger custom function on marker click
		window.google.maps.event.addListener(marker, 'click', function () {
			distriDetail(hit.objectID,this.position.lat(),this.position.lng());
		});

		return marker;
	},

	init: function(params) {

		radius = document.querySelector('#radius');

		this._helper = params.helper;

		// init the map
		this._map = new google.maps.Map(
			this._mapContainer,
			{
				zoom: 2,
				backgroundColor: "#eeeeee",
				styles: [{"elementType": "geometry","stylers": [{"color": "#f5f5f5"}]},{"elementType": "labels.icon","stylers": [{"visibility": "off"}]},{"elementType": "labels.text.fill","stylers": [{"color": "#616161"}]},{"elementType": "labels.text.stroke","stylers": [{"color": "#f5f5f5"}]},{"featureType": "administrative.land_parcel","elementType": "labels.text.fill","stylers": [{"color": "#bdbdbd"}]},{"featureType": "poi","elementType": "geometry","stylers": [{"color": "#eeeeee"}]},{"featureType": "poi","elementType": "labels.text.fill","stylers": [{"color": "#757575"}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#e5e5e5"}]},{"featureType": "poi.park","elementType": "labels.text.fill","stylers": [{"color": "#9e9e9e"}]},{"featureType": "road","elementType": "geometry","stylers": [{"color": "#ffffff"}]},{"featureType": "road.arterial","elementType": "labels.text.fill","stylers": [{"color": "#757575"}]},{"featureType": "road.highway","elementType": "geometry","stylers": [{"color": "#dadada"}]},{"featureType": "road.highway","elementType": "labels.text.fill","stylers": [{"color": "#616161"}]},{"featureType": "road.local","elementType": "labels.text.fill","stylers": [{"color": "#9e9e9e"}]},{"featureType": "transit.line","elementType": "geometry","stylers": [{"color": "#e5e5e5"}]},{"featureType": "transit.station","elementType": "geometry","stylers": [{"color": "#eeeeee"}]},{"featureType": "water","elementType": "geometry","stylers": [{"color": "#c9c9c9"}]},{"featureType": "water","elementType": "labels.text.fill","stylers": [{"color": "#9e9e9e"}]}],
				center: new google.maps.LatLng(51.0964656, 5.9588265),
			}
		);
	},

	render: function(params)
	{
		console.log('render fn');
		console.log(params);
		params.helper.setQueryParameter('query', $('#IS__search').val());

		// clear markers
		this.markers.forEach(function (marker) {
			marker.setMap(null);
		});

		// transform hits to Google Maps markers
		this.markers = params.results.hits.map(this._hitToMarker.bind(this));

		var bounds = new google.maps.LatLngBounds();

		// make sure we display the good part of the maps
		this.markers.forEach(function(marker) {
			bounds.extend(marker.getPosition());
		});

		var clusterStyles = [
			{
				textColor: 'white',
				textSize: 15,
				anchor: [12, 39],
				url: 'typo3conf/ext/siteway/Resources/Public/Images/markerclusterer/basePin.png',
				height: 70,
				width: 39
			},
			{
				textColor: 'white',
				textSize: 15,
				anchor: [12, 39],
				url: 'typo3conf/ext/siteway/Resources/Public/Images/markerclusterer/basePin.png',
				height: 70,
				width: 39
			},
			{
				textColor: 'white',
				textSize: 15,
				anchor: [12, 39],
				url: 'typo3conf/ext/siteway/Resources/Public/Images/markerclusterer/basePin.png',
				height: 70,
				width: 39
			}
		];

		var mcOptions = {
			gridSize: 58,
			styles: clusterStyles,
			maxZoom: 15
		};

		var markerCluster = new MarkerClusterer(this._map, this.markers, mcOptions);

		this._map.fitBounds(bounds);

		// zoom on results
		var zoom = this._map.getZoom();
		this._map.setZoom(zoom > 14 ? 14 : zoom);
	}
};

Why does the map show different results than the hits template? It does not make sense.

Hi Paul,

Thanks for contacting Algolia Support.

Can you setup a basic example demonstrating the issue using our CodeSandbox.io template so that we’re working on the same code?

Let me know if you have any questions.
Best regards,

Hi Jason,

thanks for your feedback: Here is the same code in the Sandbox: https://codesandbox.io/s/0qn81q60pv

For some reason I get the message that Google Maps API is included multiple times there, which is not true and not so on my actual environment.

Hi Paul,

Debugging the interaction between our places widget and GoogleMaps API is outside the scope of our Support, but we’ll help if we can on a Best Effort basis. I recommend isolating your app into smaller sections to make sure you receive results as expected at east step in the process.

Best regards,