Question:
There is a set of markers plotted on a google map. I thought to set up hiding / showing markers via jquery by the id of each marker (well, or by class).
google.maps.event.addDomListener(window, 'load', init);
function init() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(43.229682, 76.955123),
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
office: {
icon: '../images/map_icons/st_marker.png'
},
detskiy_sad: {
icon: '../images/map_icons/detskiy-sad.png'
},
study: {
icon: '../images/map_icons/study.png'
},
medical: {
icon: '../images/map_icons/medical.png'
},
sport: {
icon: '../images/map_icons/sport.png'
},
trade_center: {
icon: '../images/map_icons/trade-center.png'
}
};
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.229859, 76.955320),
map: map,
icon: icons['office'].icon,
title: 'Жилой комплекс Samal Tower'
});
var marker_detsad1 = new google.maps.Marker({
position: new google.maps.LatLng(43.231395, 76.953998),
map: map,
icon: icons['detskiy_sad'].icon,
title: 'Ясли-сад №114'
});
...
I can’t find in the manuals how to set the id parameter for a specific marker.
Answer:
The answer to this question is on the English CO: https://stackoverflow.com/questions/3219437/google-maps-marker-grouping
The issue can be resolved as follows:
- We start the markers array, where we save all the created markers
- When creating each marker, add the type field
- To hide/show markers of a certain category, we bypass the markers array and, based on the type of each marker, we change the visibility using markers[i].setVisible(true/false);
In your case it will be something like this:
// ........
var markers = [];
var marker_office1 = new google.maps.Marker({
position: new google.maps.LatLng(43.229859, 76.955320),
map: map,
icon: icons['office'].icon,
title: 'Жилой комплекс Samal Tower'
});
marker_office1.type = 'office';
markers.push(marker_office1);
var marker_detsad1 = new google.maps.Marker({
position: new google.maps.LatLng(43.231395, 76.953998),
map: map,
icon: icons['detskiy_sad'].icon,
title: 'Ясли-сад №114'
});
marker_detsad1.type = 'detskiy_sad';
markers.push(marker_detsad1);
function displayMarkers(type) {
for (var i = 0; i < markers.length; i++) {
if (markers[i].type === type) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
}