Google Maps Dropdown Selector To Show Infowindow

I have created a Google Map with Clustered Markers and a dropdown menu which displays each location. The idea is that when you select a location from the dropdown the InfoWindow is

Solution 1:

There are multiple issues in your code. First, make sure you always take scope into account. You need to set some of your variables as globals in order to retrieve their values in functions where you didn't explicitly set them:

var infoWin;
varmap;

This is why you're getting the "gmarkers[i].getPosition is not a function" error.

Then, you're adding markers and their corresponding click event listeners in both initMap and addMarker, but when you click on them, you're triggering the first event listener only which is another reason the info windows won't open. You only need to add all that code once, in one place only, e.g. in addMarker. Furthermore you're using gmarkers.push(location) when you should be pushing the actual marker instances, i.e. gmarkers.push(marker).

I've fixed your JS code as follows:

var gmarkers = [];
var side_bar_html = "";
var infoWin;
var map;
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"
  }
];

functioninitMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 10, lng: 10 },
    zoom: 3,
    minZoom: 1,
    maxZoom: 16,
    mapTypeControl: false,
    streetViewControl: false,
    scrollwheel: false
  });
  infoWin = new google.maps.InfoWindow();

  var markers = locations.map(function (location, i) {
    returnaddMarker(i);
  });

  // put the assembled side_bar_html contents into the side_bar divdocument.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>";

  var markerCluster = newMarkerClusterer(map, [], {
    imagePath: "https://www.takagi-j.com/test/marker-clusterer-example/images/m"
  });
  markerCluster.setStyles(
    markerCluster.getStyles().map(function (style) {
      style.textColor = "#fff";
      return style;
    })
  );
  markerCluster.addMarkers(markers);
}

functionaddMarker(i) {
  infoWin = new google.maps.InfoWindow();
  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:
      "https://www.takagi-j.com/test/marker-clusterer-example/images/location-marker.png"
  });
  google.maps.event.addListener(marker, "click", function (evt) {
    infoWin.setContent(draftMarker.info);
    infoWin.open(map, marker);
  });
  gmarkers.push(marker);
  side_bar_html +=
    "<option value=" +
    (gmarkers.length - 1) +
    ">" +
    draftMarker.title +
    "</option>";

  return marker;
}

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

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