GoogleマップJavascript APIカスタムコントロールがドロップダウン

Question

Javascript APIを使用して自分のウェブサイトのマップ上で作業しています。それはこれまでのところとても簡単です。カスタムマップを使用してマーカーを追加し、通常のコントロールとスクロールズームを無効にしました。私は2つのことを私のために働かせることはできません。

1. ナビゲーションをドロップダウンメニューで行いたいと思います。ドロップダウンメニューには、マップ内のすべてのマーカーが含まれているはずです。 「イングランド」を選択すると、地図はイングランドのマーカーに移動します。オランダを選ぶときにオランダに行きました。将来はフランス北部やフランス南部のような国に複数のマーカーを追加します。これらは後でメニューに統合されます。
   
2. 私はこの国のオフィスの連絡先の詳細を示すこのドロップダウンメニューの下のボックスを必要とします。だからイングランドを選ぶときにはイングランドに行くだけでなく、2番目のボックスにイングランドの連絡先の詳細が表示されます。

まだ連絡先の詳細と住所が追加されていません。すべてのマーカーは座標を使用して配置されます。

私のプロジェクトはJSFiddleにあります。私のコードを別のフィドルにコピーしたり、答えのセクションにソリューションを置いてください。 JSFiddleにそれらを含めるようにします。

My JSFiddle

StackOverflowのは、コードを挿入するために私に尋ねます。それはカスタマイズのために長いものです。 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); 
} 

ありがとうございました！

現在のスクリプトコード：

Answer 1

ええ、確かに。

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

その後、あなたはこれを行うことによって、この機能を追加：

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

をそして私はあなたの他の質問は、これまで何...

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

---

これを追加しましたあなたは表示したいyはある配列内になければなりません。あなたはそれを機能に追加できますか、機能と同じインデックスを持つ新しい配列を作成できますか？