Array.prototype.map() метод add infowindow

Question

Я следил за учебником для создания кластерной карты google, но я не могу заставить информационное окно работать? Я могу заставить его работать иначе ... просто не с помощью метода Array.prototype.map() ... любая помощь?

var locations = [] 
    var data 
    var markerData 

    $('.map').each(function (get){ //gather data from html and store 
     data = $(this).data(); 
     markerData = ([data.txt, data.lat, data.lng]) 
     locations.push(markerData); 
    }); 

    function initMap() { 

     var infowindow = new google.maps.InfoWindow(); /* SINGLE */ 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: {lat: 50.07821, lng: 8.23976} 
     }); 

     // 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(loc, i) { 
     return new google.maps.Marker({ 
      position: new google.maps.LatLng(loc[1], loc[2]), 
      animation: google.maps.Animation.DROP, 
      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'}); 
     google.maps.event.addListener(markers, 'click', function(loc){ 
     console.log('hit') 
      infowindow.close(); // Close previously opened infowindow 
      infowindow.setContent("<div id='infowindow'>"+ loc[0] +"</div>"); 
      infowindow.open(map, markers); 
     }); 

    } 

codepen пример здесь: http://codepen.io/unit60/pen/WGkroA

Answer 1

Ваш маркер нажмите слушатель находится в неправильном месте. Он может слушать только один маркер:

var markers = locations.map(function(loc, i) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(loc[1], loc[2]), 
    animation: google.maps.Animation.DROP, 
    label: labels[i % labels.length] 
    }); 
    google.maps.event.addListener(marker, 'click', (function(loc) { 
    return function(evt) { 
    infowindow.close(); // Close previously opened infowindow 
    infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>"); 
    infowindow.open(map, marker); 
    }}(loc))); 
    return marker 
}); 

proof of concept fiddle

фрагмент кода:

//https://developers.google.com/maps/documentation/javascript/examples/layer-kml-features 
 
$(document).ready(function() { 
 
    initMap(); 
 
}); 
 
var locations = [] 
 
var data 
 
var markerData 
 

 
$('.map').each(function(get) { //gather data from html and store 
 
    data = $(this).data(); 
 
    markerData = ([data.txt, data.lat, data.lng]) 
 
    locations.push(markerData); 
 
}); 
 

 
function initMap() { 
 

 
    var infowindow = new google.maps.InfoWindow(); /* SINGLE */ 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 14, 
 
    center: { 
 
     lat: 50.07821, 
 
     lng: 8.23976 
 
    } 
 
    }); 
 

 
    // 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(loc, i) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(loc[1], loc[2]), 
 
     animation: google.maps.Animation.DROP, 
 
     label: labels[i % labels.length] 
 

 
    }); 
 
    console.log("loc[0]=" + loc[0]) 
 
    google.maps.event.addListener(marker, 'click', (function(loc) { 
 
     return function(evt) { 
 
     console.log('hit') 
 
     infowindow.close(); // Close previously opened infowindow 
 
     infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>"); 
 
     console.log("loc[0]=" + loc[0]) 
 
     infowindow.open(map, marker); 
 
     } 
 
    }(loc))); 
 
    return marker 
 

 
    }); 
 

 
    // 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' 
 
    }); 
 

 

 
} 
 

 

 

 

 

 

 

 
// this part for isotope 
 
var $grid = $('.isotope-index').isotope({ 
 
    itemSelector: '.isotope-listing', 
 
    stagger: 300, 
 
    getSortData: { 
 
    name: 'h5' 
 
    }, 
 
    sortBy: 'name' 
 
}); 
 
$grid.isotope({ 
 
    // disable scale transform transition when hiding 
 
    hiddenStyle: { 
 
    opacity: 0 
 
    }, 
 
    visibleStyle: { 
 
    opacity: 1 
 
    } 
 
}) 
 

 
var filters = {}; 
 

 
$('.item-filter-select').on('change', function() { 
 
    var $this = $('option:selected'); 
 
    var $parent = $(this); 
 
    var level = $(this).parent().find('select option:selected'); 
 
    // get group key 
 
    var $buttonGroup = $parent.parents('.select-group'); 
 
    var filterGroup = $buttonGroup.attr('data-filter-group'); 
 
    // set filter for group 
 
    filters[filterGroup] = level.data('value'); 
 
    // combine filters 
 
    var filterValue = concatValues(filters); 
 
    $grid.isotope({ 
 
    filter: filterValue 
 
    }); 
 
}); 
 

 
// flatten object by concatting values 
 
function concatValues(obj) { 
 
    var value = ''; 
 
    for (var prop in obj) { 
 
    value += obj[prop]; 
 
    } 
 
    return value; 
 
}

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
section #vendo-search-field { 
 
    background: #ddd; 
 
    height: 400px; 
 
} 
 
.vendo-map { 
 
    height: 400px; 
 
} 
 
#map { 
 
    height: 500px; 
 
} 
 
.map-nav-holder { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 
.map-nav { 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 2; 
 
} 
 
.shop-profile-holder { 
 
    position: relative; 
 
    top: 35px; 
 
    height: calc(100% - 35px); 
 
    overflow-y: scroll; 
 
} 
 
.shop-profile { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: #fff; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.select-group { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.map-nav select { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.map-nav .btn { 
 
    border-radius: 0; 
 
    float: left; 
 
    width: 10%; 
 
} 
 
select:not([multiple]) { 
 
    border-radius: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    background-position: right 50%; 
 
    background-repeat: no-repeat; 
 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); 
 
    padding: .5em; 
 
    padding-right: 1.5em; 
 
} 
 
/* This bit for isotope */ 
 

 
.select-group { 
 
    display: inline-block; 
 
} 
 
.isotope { 
 
    max-width: 100%; 
 
} 
 
.isotope-listing { 
 
    width: 100%; 
 
    height: 100px; 
 
    padding: 5px; 
 
    border-bottom: 1px solid #ddd; 
 
    overflow: hidden; 
 
    background: #fff; 
 
} 
 
.isotope-listing p { 
 
    font-size: 11px; 
 
} 
 
.isotope-listing img { 
 
    float: left; 
 
    line-height: 90px; 
 
    border-right: 1px solid #ddd; 
 
    padding: 10px; 
 
    max-width: 150px; 
 
    margin-right: 20px; 
 
} 
 
.is-checked {} .is-checked:after { 
 
    content: ''; 
 
    display: block; 
 
    background: tomato; 
 
    height: 4px; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
 
<script src="http://cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script> 
 

 
<section id="vendo-search-field"> 
 
    <div class="container-fluid"> 
 
    <div class="row vendo-map"> 
 
     <div class="col-md-6" style="padding-right:0;"> 
 
     <!--start col--> 
 
     <div id="map"></div> 
 
     </div> 
 
     <!--end col--> 
 
     <div class="col-md-6" style="padding-left:0;"> 
 
     <!--start col--> 
 
     <div class="map-nav-holder"> 
 
      <!--start map-nav-holder--> 
 
      <div class="form-group map-nav"> 
 
      <!--start map-nav--> 
 
      <!--   <button class="btn btn-default">Alle 
 
      </button> --> 
 
      <div class="select-group" data-filter-group="branchen"> 
 
       <select class="custom-select form-control item-filter-select"> 
 
       <option data-value="*" selected='selected'>Alle Branchen</option> 
 
       <option data-value=".a">a Schmuck & Uhren</option> 
 
       <option data-value=".b">b Restaurants</option> 
 
       <option data-value=".c">c Schreibwaren & Papeterie</option> 
 
       </select> 
 
      </div> 
 
      <div class="select-group" data-filter-group="marken"> 
 
       <select class="custom-select form-control item-filter-select"> 
 
       <option data-value="*" selected='selected'>Alle Marken</option> 
 
       <option data-value=".nike">Nike</option> 
 
       <option data-value=".adidas">Adidas</option> 
 
       <option data-value=".puma">Puma</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
      <!--end map-nav--> 
 

 
      <div class="shop-profile-holder"> 
 
      <div class="isotope-index"> 
 
       <div class="isotope-listing b nike adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/1.jpg" /> 
 
       <h5>b nike adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="01" data-lat="50.08521" data-lng="8.24976"></div> 
 

 
       </div> 
 

 
       <div class="isotope-listing a nike adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/2.jpg" /> 
 
       <h5>a nike adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="02" data-lat="50.08121" data-lng="8.23976"></div> 
 
       </div> 
 

 
       <div class="isotope-listing a b puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/3.jpg" /> 
 
       <h5>a b puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="03" data-lat="50.07851" data-lng="8.23226"></div> 
 
       </div> 
 

 
       <div class="isotope-listing c adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/4.jpg" /> 
 
       <h5>c adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="04" data-lat="50.07891" data-lng="8.24996"></div> 
 
       </div> 
 

 
       <div class="isotope-listing a puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/5.jpg" /> 
 
       <h5>a puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="05" data-lat="50.07321" data-lng="8.23176"></div> 
 
       </div> 
 

 
       <div class="isotope-listing a adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/6.jpg" /> 
 
       <h5>a adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="06" data-lat="50.07821" data-lng="8.24576"></div> 
 
       </div> 
 

 
       <div class="isotope-listing a b c nike adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/3.jpg" /> 
 
       <h5>a b c nike adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="07" data-lat="50.07421" data-lng="8.23376"></div> 
 
       </div> 
 

 
       <div class="isotope-listing b puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/2.jpg" /> 
 
       <h5>b puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="08" data-lat="50.07521" data-lng="8.24976"></div> 
 
       </div> 
 

 
       <div class="isotope-listing a nike"> 
 
       <img src="http://unit60.com/vendo/img/logos/5.jpg" /> 
 
       <h5>a nike</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class="map" data-txt="09" data-lat="50.07921" data-lng="8.23576"></div> 
 
       </div> 
 

 
       <div class="isotope-listing c b adidas"> 
 
       <img src="http://unit60.com/vendo/img/logos/1.jpg" /> 
 
       <h5>c b adidas</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class=""></div> 
 
       </div> 
 

 
       <div class="isotope-listing c adidas puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/3.jpg" /> 
 
       <h5>c adidas puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class=""></div> 
 
       </div> 
 

 
       <div class="isotope-listing b puma"> 
 
       <img src="http://unit60.com/vendo/img/logos/6.jpg" /> 
 
       <h5>b puma</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class=""></div> 
 
       </div> 
 

 
       <div class="isotope-listing a b nike "> 
 
       <img src="http://unit60.com/vendo/img/logos/2.jpg" /> 
 
       <h5>a b nike</h5> 
 
       <p>Shop description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p> 
 
       <div class=""></div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!--end shop-profile-holder--> 
 
     </div> 
 
     <!--end map-nav-holder--> 
 
     </div> 
 
     <!--end col--> 
 

 
    </div> 
 
    <!--end row--> 
 
    </div> 
 
    <!--end container--> 
 
</section>