Javascript 基于html下拉列表的Google地图依赖关系

这是我的第一篇帖子，我希望我能得到一些帮助，因为我对开发领域还比较陌生，如果我的问题有点愚蠢，请原谅

我试图制作一个仪表板，从html中的下拉列表实现依赖关系——假设根据所选的下拉列表值，应该更新包含google maps引用的div标记

例如：

我从下拉列表中选择一个大陆，然后谷歌将改变对该地区的看法，稍后在地图上显示定制的兴趣点。有人能帮我或提出一个可能的解决方案吗

---

谢谢大家!

确保包含Google Maps Javascript API，我假设您已经完成了这项工作：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

---

然后在页面中添加下拉列表或任何类型的带有类映射输入的输入，以及带有类映射画布的div。当然，您可以将这些类名更改为您想要的任何名称。

欢迎使用StackOverflow！请考虑阅读-它应该给你提示如何使你的问题更好。总的来说，展示你迄今为止所做的努力将激发出更好的答案。

var map;
var geocoder;

function initialize() {
    var mapOptions = {
        center:            new google.maps.LatLng(-34.397, 150.644),
        zoom:              10,
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    geocoder = new google.maps.Geocoder();
}
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
    $('input.maps-input').on('change', function() {
        geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK)
                map.setCenter(results[0].geometry.location);
            else
                alert('A location could not be found. ' + status);
        });
    });
});