Marker filter google maps api

Question

The task is to make filter markers based on radio buttons. The network has found only an example with checkboxes that hide markers. I beg you to prompt or show an example implementation with radio.

var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ['0', 'Title 1', 52.4357808, 4.991315699999973, ['car', 'second']], ['1', 'Title 2', 52.4357808, 4.981315699999973, ['third']], ['2', 'Title 3', 52.4555687, 5.039231599999994, ['car', 'third']], ['3', 'Title 4', 52.4555687, 5.029231599999994, ['second']] ]; markerCount = markers1.length /** Function to init map */ function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markerCount; i++) { addMarker(markers1[i]); } } /** Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function (marker1, content) { return function () { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); } // Function on Change of checkbox updateView = function (element) { if (element) { //Get array with names of the checked boxes checkedBoxes = ([...document.querySelectorAll('input[type=checkbox]:checked')]).map(function(o) { return o.id; }); console.log(checkedBoxes); for (i = 0; i < markerCount; i++) { marker = gmarkers1[i]; console.log(marker.category) //Filter to show any markets containing ALL of the selected options if(typeof marker.category == 'object' && checkedBoxes.every(function (o) { return (marker.category).indexOf(o) >= 0;})){ marker.setVisible(true); } else { marker.setVisible(false); } } } else { console.log('No param given'); } } // Init map initialize();

 #map-canvas { width: 500px; height: 500px; }

 <script src="https://maps.googleapis.com/maps/api/js?key=&v=3&language=ee&dummy=dummy.js"></script> <div id="map-canvas"></div> <div id="options"> <input type="checkbox" id="car" onchange="updateView(this);"/> Car <input type="checkbox" id="second" onchange="updateView(this);"/> Second <input type="checkbox" id="third" onchange="updateView(this);"/> Third </div>

Accepted Answer · 2018-09-01T20:48:26

Here is how it is done.

Markers are divided into groups in the myMarkers object, each key is the name of the group, and each value is a group object in which the keys are marker headers, and the value is the coordinates of the marker.

In each group there can be options, in the options you can specify any parameters that will be applied to each group marker, in this example there are icons and animation in the options.

The googleMarkers object is googleMarkers in structure to myMarkers but contains Google marker objects, and not their description; this object is populated in the setMarkers function.

Radio buttons are bound to groups by the data-* attribute, this allows the use of an arbitrary id for the element. Initially, those markers that relate to the radio button that is checked are displayed. The radio button with data-marker="showall" shows all the items.

The rest should be clear, there are comments in the code and ES2015 is used.

 let map, googleMarkers = {} // карта и объект содержащий объекты гугл маркеров const radios = document.querySelectorAll('input[type=radio][data-marker]') const myMarkers = { // описание маркеров car: { 'Title 1': { coordinates: [52.4357808, 4.991315699999973], info: 'Завод' }, }, second: { // имя группы options: { // опции для маркеров этой группы icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' }, 'Title 2': { coordinates: [52.4357808, 4.981315699999973], info: 'Магазин' }, 'Title 3': [52.4555687, 5.039231599999994] }, third: { options: { icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png', animation: google.maps.Animation.BOUNCE }, 'Title 4': [52.4755687, 5.019261599999994], 'Title 5': [52.4555687, 5.049231599999994], 'Title 6': { coordinates: [52.4055687, 5.039236599999994], info: 'Больница' } } } initMap() // для каждой радио-кнопки добавляет слушатель события клика radios.forEach(i => i.addEventListener('click', radioClick)) function initMap() { const center = new google.maps.LatLng(52.4527808, 4.991315699999973) const mapOptions = { zoom: 11, center, mapTypeId: google.maps.MapTypeId.TERRAIN } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions) setMarkers() } function setMarkers () { let isFirst = true for (let group in myMarkers) { for (let title in myMarkers[group]) { if (title === 'options') // не берет во внимание опции continue const myMarker = myMarkers[group][title] const visible = document.querySelector(`input[type=radio][data-marker=${group}]`).checked let coordinates, info if (myMarker[0]) { // если массив координат coordinates = myMarker } else { coordinates = myMarker.coordinates info = myMarker.info } const marker = new google.maps.Marker({ title, position: {lat: coordinates[0], lng: coordinates[1]}, map, visible, ...myMarkers[group].options // берет опции группы }) if (info) addInfoWindow(marker, info) googleMarkers[group] = googleMarkers[group] || [] // создает массив если его нет googleMarkers[group].push(marker) } } } function radioClick ({ target }) { // берет target события const group = target.dataset.marker // id группы к которой принадлежит радио-кнопка const everyMarker = getEveryMarker() // прячет у всех infowindow markersHideInfoWindow(everyMarker) if (group === 'showall') { // показывает всех everyMarker.forEach(i => i.setVisible(true)) return } // те кто был видимым становиться не видемым everyMarker.forEach(i => i.visible && i.setVisible(false)) // показывает группу к которой принадлежит радио-кнопка for (let marker of googleMarkers[group]) marker.setVisible(!marker.visible) } function addInfoWindow (marker, content) { const infowindow = new google.maps.InfoWindow({ content }) marker.infowindow = infowindow marker.addListener('click', () => { // прячет у всех infowindow markersHideInfoWindow(getEveryMarker()) //console.log(infowindow) infowindow.open(map, marker) }) } function getEveryMarker () { const arrOfEveryGroup = Object.values(googleMarkers) // массив массивов групп маркеров const everyMarker = [].concat.apply([], arrOfEveryGroup) // массив всех маркеров return everyMarker } function markersHideInfoWindow (markers) { markers.forEach(i => i.infowindow && i.infowindow.close()) }

 #map-canvas { height: 160px; width: 100%; } #map-canvas img { max-width: none; } #map-canvas div { -webkit-transform: translate3d(0, 0, 0); }

 <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map-canvas" ></div> <input data-marker="car" id="car" type="radio" name="myMarkers"> <label for="car">car</label> <input data-marker="second" id="second" type="radio" name="myMarkers" checked> <label for="second">second</label> <input data-marker="third" id="third" type="radio" name="myMarkers"> <label for="third">third</label> <input data-marker="showall" id="showall" type="radio" name="myMarkers"> <label for="showall">Показать все</label>

Map size reduced for easy launch on this site.

Can you please tell me how to add popup content to each marker?
Now, if you pass an object, then you need to set the coordinates like this and the opportunity to set info (infowindow content): 'Title 6': { coordinates: [52.4055687, 5.039236599999994], info: 'Больница' } 'Title 5': [52.4555687, 5.049231599999994] from which the coordinates are taken

Marker filter google maps api

1 answer 1

More articles: