title: Google Maps Javascript API custom controls drop down
body: <p>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.</p>
  
  <ol>
  <li>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.<br></li>
  <li>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. </li>
  </ol>
  
  <p>I have not yet added the contact details and addresses. All markers are placed using coordinates. </p>
  
  <p>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.</p>
  
  <p><a href="https://jsfiddle.net/iMarkee/ezvg7nw5/2/" rel="nofollow">My JSFiddle</a></p>
  
  <p>Stackoverflow asks me to insert the code. It is a long one due to the customization's. 
      var map;</p>
  
  <pre><code>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 = '&lt;img src="' + icon + '"&gt; ' + name;
      legend.appendChild(div);
    }
    map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); 
  }
  </code></pre>
  
  <p>Thank you all in advance!</p>
  
  <p>Current script code:</p>