I'm using the MapboxGeocoder with the countries option set to a default country, but I would like to update this option if the user changes the country they want to search in.
Current code:
// Add the control to the map.
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
marker: false,
countries: 'nz'
});
I'm using the chosen plugin from harvest, so I have the on change function working, I need to know if it's possible to change the countries option when they change the country so that results searched for will only return for the current country they have selected
// Country selection changed
$('#country_id').on('change', function(evt, params) {
// Check it's not empty
if (params) {
// code to go in here to change 'countries' option
}
});
Ok, after some digging I found out how you can do this. I know this is an old question, but I'll post it anyway in case someone else ends up here trying to do the same thing! Looking at the API references here:
https://github.com/mapbox/mapbox-gl-geocoder/blob/main/API.md#setcountries
It turns out there is a setCountries option - so just invoke it with:
placesAutocompleteBilling.setCountries(this.value)
with this.value being the country code (ES, IT, FR, GB etc). It seems to do the trick
Related
MapboxGeocoder provides seInput and query methods both of which can be used to set an initial address in the autocomplete dropdown. But the problem is both sets the input and fetch similar locations and show the results. Is it possible to just set the input value without showing the places suggestions list?
But the problem is both sets the input and fetch similar locations and show the results
Unlike query, which is used to "set & query the input", setInput only sets input.
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
});
map.addControl(geocoder);
geocoder.setInput("New York");
I have a page to display all markers on a single google map and use map.data.loadGeoJson to achieve this.
The markers link to their respective details page with the following:
map.data.addListener('click', function(event) {
var id = event.feature.getProperty('name');
window.location.href = 'submission-details.php?submission_id='+id;
});
(The property 'name' is a json file property and the ID for each submission).
I would like the details page to also show a map, but only with one marker relevant to that specific details page.
My json type is feature collection, so I think I need a way to target each feature from the collection, rather than just using map.data.loadGeoJson which displays them all.
Not sure where to go from here and struggled to find someone else asking the same question so any help appreciated!
UPDATE
Thanks Duncan.
I added:
map.data.loadGeoJson('../photo_share/upload/file.json', {},function() {
map.data.getFeatureById(53);
map.data.getFeatureById(53).getProperty('name');
console.log(map.data.getFeatureById(53));
console.log(map.data.getFeatureById(53).getProperty('name'));
});
google.maps.event.addDomListener(window, "load", initMap3);
And it does display in console log, but how do I now use this to only display the one marker, because it currently displays all of them still.
The google.maps.Data class has a getFeatureById method. Given you're passing that id into the submission-details.php page, you should be able to use that to get just the single feature.
You still need to use loadGeoJson, and wait until that's loaded before trying to access it; see Google Maps API: getFeatureById for feature collection not working
Update: And then to stop the whole collection displaying, maybe something like this (completely untested)?
map.data.loadGeoJson('../photo_share/upload/file.json', {}, function(features) {
// get the feature you want:
var feature = map.data.getFeatureById(53);
// hide the current set:
map.data.setMap(null);
// wipe out all the current features:
for (var i = 0; i < features.length; i++) {
map.data.remove(features[i]);
}
// add the feature you want back in:
map.data.add(feature);
// display it:
map.data.setMap(map);
});
Using jVectorMap, I would like to have a function that takes the country code as its parameters, then highlights that country on the map. For example:
function colorCountry(var code){
$('#world-map').vectorMap(
code : '#686868',
));
}
That is just a mockup; I'm asking here because I have little experience with Javascript / jQuery and haven't been able to find a suitable solution on Google.
I would like the function to simply color the country it is provided with, rather than clear the map so only one country is colored. For example:
colorCountry("DE");
colorCountry("US");
..would present the user with a map with both US and DE colored, rather than just one.
Try this:
$('#world-map').vectorMap({
series: {
regions: [{ values: {
"US":"#686868",
"DE"："#686868"
}, attribute: 'fill' }]
}
});
First of all many thanks & appreciated for any help, advice or suggestion to the above challenges.
In my program there are 2 main parts such as: -
1. Checkbox by category or state.
2. ClusterMarkers by selected category or state
Due to my limitted technical skill and knowledge, I'm having problem to clear, disable or hide the clusterMarker if un-check the checkbox.
U have tried many methods such as: -
if ( markerClusterer !== null ) {
markerClusterer.clearMarkers();
}
or
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
map.clearOverlays();
}
details program & data as follows:-
Program-> [jsfiddle] (jsfiddle.net/39tES)
Data -> [jsfiddle] (jsfiddle.net/DELus)
It sounds like you want multiple instances. If you can aggregate your data by state level, you could try making a MarkerClusterer instance for each state / category:
var clustererStateOrCat = new MarkerClusterer(mapInstance, markersForStateOrCat, mc_opts);
then you could have an object literal that stores the instances:
var clusterers[stateOrCategoryName] = clustererStateOrCat;
Then you could just detect what state / category was clicked, and remove / draw the markers for just that specific entity.
I need to render the results of google.maps.places.Autocomplete in a custom way, instead of the default drop down menu.
Is there any way I can use the Google Maps API V3 to retrieve the same info of Autocomplete, but in an Array per request instead of the API do the rendering for me?
PS1:
I wondered I could use the google.maps.places.PlaceSearchRequest. But, differently from Autocomplete, it restricts my location. It cannot be used to search worldwide.
http://code.google.com/apis/maps/documentation/javascript/reference.html
http://code.google.com/apis/maps/documentation/places/index.html
PS2:
The default way I am (currently) using Autocomplete restricts me. I must pass an input element, and the API renders the dropdown, which I do NOT want.
var autocomplete, input_el, place_changed_trigger_func;
input_el = <an input element>;
place_changed_trigger_func = function() {
var place = autocomplete.getPlace();
// do whatever you want with place
};
autocomplete = new google.maps.places.Autocomplete(input_el, {types: ["geocode"]});
google.maps.event.addListener(autocomplete, 'place_changed', place_changed_trigger_func);
I believe this is the link that #jegnag meant to include.
https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service
You can access the array of results (places in addition to suggested search terms), you can even add your own custom results to this array, and display everything however you choose.
Have you explored the Autocomplete function of the Places API webservice? That appears to be what you're looking for.
Try the AutocompleteService class:
"You can use the AutocompleteService class to retrieve the query or place prediction data returned from the Autocomplete service. Calling either the getPlacePredictions() or getQueryPredictions() methods will return an array of five prediction objects of the form:"