Как увеличить масштаб при выборе значения из раскрывающегося списка?

Question

Как видно из названия, я хочу увеличить местоположение, выбранное в раскрывающемся списке. У меня есть разные маркеры на карте, местоположения, которые также находятся в раскрывающемся списке, поэтому, когда я выбрал один из раскрывающихся списков, я хочу увеличить масштаб и отцентрировать местоположение. Я довольно новичок в этом javascript, jquery и любая помощь будет принята с благодарностью. Вот мой выпадающий список:

    <div>
        <select class="form-control" id="selectedValue" >
            <option>--Select--</option>
            @foreach (var item in ViewBag.ListOfDropdown)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
    </div>

Вот как мои карты Google отображаются и заполняются:

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'),
        {
            center: { lat: 46.770920, lng: 23.589920 },
            zoom: 13
        });

    $.get("/Home/GetAllLocation",
        function (data, status) {
            var marker = [];
            var contentString = [];
            var infowindow = [];
            for (var i = 0; i < data.length; i++) {

                marker[i] = new google.maps.Marker({
                    position: { lat: data[i].latitudine, lng: data[i].longitudine },
                    map: map
                });

                contentString[i] = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<h1 id="firstHeading" class="firstHeading">' +
                    data[i].name +
                    '</h1>' +
                    '<div id="bodyContent">' +
                    '<p><b> Numar locuri Fast Charging: </b>' +
                    data[i].nrOfBikes +
                    '<p><b> Numar locuri care nu-s Fast Charging: </b>' +
                    data[i].nrOfAvailableBikes +
                    '<a href="@Url.Action("Index", "Home")" ><p>View Details</a>' +
                    '<form asp-action=""><div><input type="submit" value="Open" class="btn btn-success"> <input type="submit" value="Close" class="btn btn-danger"></div></form>';

                infowindow[i] = new google.maps.InfoWindow({
                    content: contentString[i]
                });
                var mdl = marker[i];
                google.maps.event.addListener(marker[i],
                    'click',
                    (function (mdl, i) {
                        return function () {
                            infowindow[i].open(map, marker[i]);
                            for (var j = 0; j < infowindow.length; j++) {
                                if (j != i) {
                                    infowindow[j].close();
                                }

                            }
                        }
                    })(marker[i], i));
            }
        });

}

И вот что я нашел в Интернете и попытался применить к тому, что мне нужно, но я не уверен, что сделал это правильно:

jQuery(document).on('change', '#selectedValue', function() {
    var latlngzoom = jQuery(this).val();
    var newzoom = 1 * latlngzoom[2];
    newlat = 1 * latlngzoom[0];
    newlng = 1 * latlngzoom[1];
    map.setZoom(newzoom);
    map.setCenter({lat:newlat, lng: newlng})
});

Answer 1

Мне удалось решить мой вопрос, и вот мой код, на случай, если кому-нибудь еще понадобится что-то подобное: Раскрывающийся список cshtml:

        <select class="form-control" id="selectedValue" onchange="GoToLocation(this.value)">
            <option>Choose a station...</option>
            @foreach (var item in ViewBag.ListOfDropdown)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>

Контроллер:

        public JsonResult GetAllLocationById(int? id)
        {
            var data = _context.Stations.Where(m => m.Id == id).SingleOrDefault();
            return Json(data);
        }

И функция JavaScript:

function GoToLocation(locationId) {
    $.get("/UserMap/GetAllLocationById?id=" + locationId,
        function (data, status) {
            if (data != null) {
                map.setCenter(new google.maps.LatLng(data.latitudine, data.longitudine));
                map.setZoom(17);
            } else {
                map.setZoom(13);
                map.panTo(new google.maps.LatLng(46.770920, 23.589920));
            }
        }
    )
}

ПРИМЕЧАНИЕ: если data равно нулю, я позволю ему уменьшить масштаб карты, потому что это то, что я хотел сделать, выбрав Choose a station извыпадающий, который был нулевым.