var map = {};
function initialize() {
var mapProp = {
center: {
lat: -25.363,
lng: 131.044
},
zoom: 8,
markers: []
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker1 = new google.maps.Marker({
position: {
lat: -25.363,
lng: 131.044
},
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
map: map,
category: 'blue',
});
map.markers.push(marker1);
var marker2 = new google.maps.Marker({
position: {
lat: -25.664,
lng: 131.044
},
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map,
category: 'green',
});
map.markers.push(marker2);
var marker3 = new google.maps.Marker({
position: {
lat: -25.365,
lng: 131.144
},
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
map: map,
category: 'red',
});
map.markers.push(marker3);
var marker4 = new google.maps.Marker({
position: {
lat: -25.366,
lng: 131.244
},
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
map: map,
category: 'blue',
});
map.markers.push(marker4);
var marker5 = new google.maps.Marker({
position: {
lat: -25.565,
lng: 131.144
},
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
map: map,
category: 'red',
});
map.markers.push(marker5);
var marker6 = new google.maps.Marker({
position: {
lat: -25.666,
lng: 131.244
},
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
map: map,
category: 'green',
});
map.markers.push(marker6);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$('.markerBtn').bind('click', function(el) {
var catToToggle = $(this).attr('data-category');
$.each(map.markers, function() {
if (this['category'] == catToToggle) {
this.setVisible(!this.getVisible());
}
});
});
});
.markerBtn {
float: left;
cursor: pointer;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="width:500px;height:380px; "></div>
Нажмите на маркер слева, чтобы скрыть/показать на карте
<div class="markerBtn" data-category="green">
<img src="http://maps.google.com/mapfiles/ms/icons/green-dot.png" width="50">
</div>
<div class="markerBtn" data-category="red">
<img src="http://maps.google.com/mapfiles/ms/icons/red-dot.png" width="50">
</div>
<div class="markerBtn" data-category="blue">
<img src="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" width="50">
</div>