Делаю подключение к google maps все работает, но не могу понять как текс при наведении на кластер добавить. Потому как из бд данные подгружаются и у каждого кластера свои данные, как это реализовать?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 57.606750501032174, lng: 39.3559455871582},
navigationControl: true,
styles: [
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#181818"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2c2c2c"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8a8a8a"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#373737"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#3c3c3c"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#4e4e4e"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
]
});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 57.606750501032174, lng: 39.3559455871582},
{lat: 57.606750501032174, lng: 39.3559455871582},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.62146171344325, lng: 39.8173713684082},
{lat: 57.12146171344325, lng: 39.9173713684082},
{lat: 0, lng: 0}
]
#map {
position: absolute!important;
display: block;
width: 100%;
height: 100%;
}
.map_place {
background-color: unset !important;
}
.text_scroll_arrows {
top: 0;
}
.map_objects_list{
height: 280px;
}
.big_close{
z-index: 99999;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3GRKDAxRHJbTG8ErTVFnzjWQtLEdVcJo&callback=initMap">
</script>
<div id="map"></div>
</body>
</html>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
jquery masked input плагинЕсть несколько полей с телефонами с таким классом, но работает почему-то на самом первом
При переключении с одной на другую кнопку должно работать по принципу кнопок ,если нажал на первую то в ней записалось 1 ,а во второй кнопке...