Google Maps Javascript API custom controls drop down

Question

I'm working on a map for my website using the Javascript API. It's very easy so far. I have made a custom map using, added my markers and disabled the normal controls as well as the scroll zoom. I can't get 2 things to work for me.

1. I would like navigation to be done by a dropdown menu. The dropdown menu should contain all markers in my map. When choosing "England", the map goes to the marker in England. and when choosing the Netherlands it goed to the Netherlands. In the future I will add multiple markers in a country like France north and France south. These will later be integrated in the menu.
   
2. I want a box under this dropdown menu which shows the contact details of the office in the country. So when choosing England it will not only go to England, but the second box shows the contact details for England.

I have not yet added the contact details and addresses. All markers are placed using coordinates.

My project is in a JSFiddle. Feel free to copy my code into another Fiddle or place solutions in the answer section! I will try to include them in my JSFiddle.

My JSFiddle

Stackoverflow asks me to insert the code. It is a long one due to the customization's. var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(46.3485167, 21.9843998),
    scrollwheel:  true,
     disableDefaultUI: true,
    mapTypeId: 'roadmap',
    styles: [{
      "featureType": "road.highway",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "administrative.locality",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.natural",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#808080"
      }, {
        "lightness": 96
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "geometry.stroke",
      "stylers": [{
        "visibility": "off"
      }]
    }, {}]
  });
  var iconBase = 'http://www.loading-systems.com/sites/default/files/images/website2016/';
  var icons = {
    office: {
      name: 'Offices',
      icon: iconBase + 'map-marker-office.png'
    },
    factory: {
      name: 'Factory',
      icon: iconBase + 'map-marker-factory.png'
    },
    dealer: {
      name: 'Distributor',
      icon: iconBase + 'map-marker-dealer.png'
    }
  };

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map
    });
  }

  var features = [{
    position: new google.maps.LatLng(52.4997173, 5.4302006),
    type: 'office'
  }, {
    position: new google.maps.LatLng(51.2368042, 4.4566387),
    type: 'office'
  }, {
    position: new google.maps.LatLng(50.1152834, 8.5038213),
    type: 'office'
  }, {
    position: new google.maps.LatLng(53.6245002, -1.7210977),
    type: 'office'
  }, {
    position: new google.maps.LatLng(49.0383945, 2.6853833),
    type: 'office'
  }, {
    position: new google.maps.LatLng(52.4260763, 16.8591883),
    type: 'office'
  }, {
    position: new google.maps.LatLng(50.0033534, 14.4028093),
    type: 'office'
  }, {
    position: new google.maps.LatLng(48.6130105, 17.7152123),
    type: 'office'
  }, {
    position: new google.maps.LatLng(24.8875455, 55.1403156),
    type: 'office'
  }, {
    position: new google.maps.LatLng(59.8841107, 30.3249023),
    type: 'office'
  }, {
    position: new google.maps.LatLng(47.05361, 21.9299127),
    type: 'office'
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  }
  var legend = document.getElementById('legend');
  for (var key in icons) {
    var type = icons[key];
    var name = type.name;
    var icon = type.icon;
    var div = document.createElement('div');
    div.innerHTML = '<img src="' + icon + '"> ' + name;
    legend.appendChild(div);
  }
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); 
}

Thank you all in advance!

Current script code:

Answer 1

Yeah, sure.

https://jsfiddle.net/kpoynp8w/9/

// I added this code under your function addMarker

function addOption(feature, i) {
  var name = 'marker ' + i;  // you should have the name of the location in the data
  var option = '<option value="'+ i +'">' + name + '</option>';
  document.getElementById('dropdown').innerHTML += option;
}
function selectOpion(selectElm) {
  var i = Number(selectElm.value);
  map.setCenter(features[i].position);
  map.setZoom(6);  // with many markers per country you could zoom/pan with the boundaries ...
}
// onChange of the select element
google.maps.event.addDomListener(document.getElementById('dropdown'), 'change', function(e) {
  selectOpion(this);
});

Then you add this functionality by doing this:

for (var i = 0, feature; feature = features[i]; i++) {
  addMarker(feature);
  addOption(feature, i);
}

And I added this

<select id="dropdown"></select>

---

Your other questions... what ever you want to display, must be in some array. Can you add it to features, or make a new array with the same index as the features... ?