Всем добрый день! JS я понимаю плохо и потому пишу сюда с просьбой помочь. Есть гугл карта. На ней необходимо задать появление заголовков на маркерах только при клике на кнопку. Также при загрузке заголовки должны быть скрыты. Подскажите пожалуйста как можно это все реализовать? Прилагаю скрипты карты:
<script>
$(document).ready(function(){
function showOnMap(markerkey){
map.setCenter(all_positions[markerkey]);
map.setZoom(14);
}
$('.ggl-map-btn').click(function(){
showOnMap($(this).data('mapkey'));
});
});
var map;
var all_markers={};
var all_positions={};
var all_shops={
0 : {
lat : 25.221829,
lng : 55.434515,
title : "Katrina Sweets & Confectionery - Uptown Mirdif",
name : "Uptown Mirdif",
},
1 : {
lat : 25.099150,
lng : 55.205056,
title : "Katrina Sweets & Confectionery - kiosk in Al Barsha Mall",
name : "Al Barsha, Dubai",
},
2 : {
lat : 25.232732,
lng : 55.385531,
title : "Katrina Sweets & Confectionery - Al Rashidiya, Bin Sougat",
name : "Al Rashidiya, Bin Sougat Centre, Dubai",
},
3 : {
lat : 25.115208,
lng : 55.195457,
title : "Katrina Sweets & Confectionery - Al Barsha",
name : "Kiosk in Al Barsha Mall, Dubai",
},
4 : {
lat : 25.2648841,
lng : 55.3741042,
title : "Katrina Sweets & Confectionery - kiosk in Emirates Co-operative Society, Dubai",
name : "Kiosk in Emirates Co-operative Society, Dubai",
}
};
function initialize() {
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
var myLatlng = new google.maps.LatLng(25.182732, 55.334515);
var mapOptions = {
zoom: 11,
center: myLatlng,
/*zoomControl: false,*/
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
/*draggable: false,*/
streetViewControl: false,
overviewMapControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var key in all_shops) {
all_positions[key] = new google.maps.LatLng(all_shops[key].lat, all_shops[key].lng);
all_markers[key] = new google.maps.Marker({
position: all_positions[key],
map: map,
/*icon: image,*/
/*animation: google.maps.Animation.BOUNCE ,*/
title: all_shops[key].title
});
var contentString = '<div class="Info-window">' + '<p>' + all_shops[key].name + '</p>' + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, all_markers[key]);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
