javascript - Google Maps Cluster AND dropdown of locations outside map

Question

I have created a google map using Marker Clustering - the location array looks like this

var locations = [
{
title: "Marker 1",
lat: 0,
lng:  0,
info: "Info Window 1"
},
{
title: "Marker 2",
lat: 0,
lng:  1,
info: "Info Window 2"
},
etc etc etc

I want to create a Dropdown menu outside the map that adds the 'Title' and then when selected opens the InfoWindow on the map. I have implemented this successfully in the past using this code

for (var i = 0; i < markers.length; i++) {
    marker = addMarker(i);
}

// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);' name="country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false"><option value="Please choose your country...">Please choose your country...</option>"+side_bar_html+"</select>";

function addMarker(i) {
    var draftMarker = markers[i];
    var myLatLng = new google.maps.LatLng(draftMarker[1], draftMarker[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: draftMarker[0],
        icon: '<?php echo get_template_directory_uri(); ?>/images/location-marker.png'
    });

    google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker[3]);
        info.open(map, marker);
    });
    gmarkers.push(marker);
    side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker[0] + '</option>';

    return marker;

But this was using the following format for the locations

 map = new google.maps.Map(document.getElementById('map'), mapOptions);


var markers = [
["Marker 1", 0, 0, "Infow Window 1"],
["Marker 2", 0, 1, "Infow Window 2"],
etc etc etc
];

How do I make the old Drop down menu code work with the new array ???

EDITED !!!! This is the code I have now - with the change suggested by Rado - the only thing that doesn't work is showing the InfoWindow when selecting the item in the drop down.

<script type="text/javascript">
var map;
var info = new google.maps.InfoWindow();
var gmarkers = [];
var side_bar_html = "";

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 1, lng: 1},
  zoom: 3,
    minZoom: 1, 
    maxZoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
  position: location,
    icon: '../images/location-marker.png'
});
google.maps.event.addListener(marker, 'click', function(evt) {
  infoWin.setContent(location.info);
  infoWin.open(map, marker);
})
return marker;
});

var markerCluster = new MarkerClusterer(map, [], {
imagePath: '../images/m' 
});
markerCluster.setStyles(markerCluster.getStyles().map(function (style) {
style.textColor = '#fff';
return style;
}));
markerCluster.addMarkers(markers)
}

var locations = [
{
title: "Marker 1",
lat: 0,
lng:  0,
info: "Info Window 1"
},
{
title: "Marker 2",
lat: 0,
lng:  1,
info: "Info Window 2"
},
{
title: "Marker 3",
lat: 0,
lng:  2,
info: "Info Window 3"
},
{
title: "Marker 4",
lat: 1,
lng:  0,
info: "Info Window 4"
},
{
title: "Marker 5",
lat: 1,
lng:  1,
info: "Info Window 5"
},
{
title: "Marker 6",
lat: 1,
lng:  2,
info: "Info Window 6"
},
];

for (var i = 0; i < locations.length; i++) {
    marker = addMarker(i);
}

document.getElementById("side_bar").innerHTML = "<select onchange='myclick(this.value);' name="country" class="wpcf7-form-control wpcf7-select form-control" aria-invalid="false"><option value="Please choose your country...">Please choose your country...</option>"+side_bar_html+"</select>";

function addMarker(i) {
var draftMarker = locations[i];
var myLatLng = new google.maps.LatLng(draftMarker.lat, draftMarker.lng);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: draftMarker.title,
    icon: '<?php echo get_template_directory_uri(); ?>/images/location-marker.png'
});

google.maps.event.addListener(location, 'click', function () {
    info.setContent(draftMarker.info);
    info.open(map, location);
});
gmarkers.push(location);
side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker.title + '</option>';

return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    map.setCenter(gmarkers[i].getPosition());
    google.maps.event.trigger(gmarkers[i], "click");
}

google.maps.event.addDomListener(window, "load", initMap);

</script>

Answer 1

By a wild guess:

function addMarker(i) {
    var draftMarker = markers[i];
    var myLatLng = new google.maps.LatLng(draftMarker.lat, draftMarker.lng);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: draftMarker.title,
        icon: '<?php echo get_template_directory_uri(); ?>/images/location-marker.png'
    });

    google.maps.event.addListener(marker, 'click', function () {
        info.setContent(draftMarker.info);
        info.open(map, marker);
    });
    gmarkers.push(marker);
    side_bar_html += '<option value=' + (gmarkers.length-1) + '>' + draftMarker.title + '</option>';

    return marker;

---

By your last edit => change click event inside addMarker function with this

google.maps.event.addListener(marker, 'click', function () {
    info.setContent(draftMarker.info);
    info.open(map, marker);
});