Добавить тект к google maps кластерам

203
22 августа 2018, 18:30

Делаю подключение к 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>

READ ALSO
Поочередная заливка кнопок onClick [дубликат]

Поочередная заливка кнопок onClick [дубликат]

На данный вопрос уже ответили:

148
как сделать jquery masked input на несколько телефонов?

как сделать jquery masked input на несколько телефонов?

jquery masked input плагинЕсть несколько полей с телефонами с таким классом, но работает почему-то на самом первом

148
Переключение кнопок

Переключение кнопок

При переключении с одной на другую кнопку должно работать по принципу кнопок ,если нажал на первую то в ней записалось 1 ,а во второй кнопке...

169
Не срабатывает миграция конфига webpack

Не срабатывает миграция конфига webpack

Решил обновит зависимости в packagejson

178