How to zoom in when a value from a drop-down is selected?

Question

As the title says i want to zoom on the location selected in the drop-down list. I have different markers on the map, locations which are in the drop-down too, so when i chose one from the drop-down i want to zoom in and center on the location. I'm pretty new at this javascript, jquery thing and any help would be highly appreciated. Here is my drop-down list:

    <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>

Here is how my Google Maps is rendered and populated:

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

}

And here is what i have found on the internet and tried to apply to what i need, but i'm not sure i did it in the right way:

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

I managed to resolve my question and here is my code, in case anyone else will ever need something like that: The cshtml drop-down:

        <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>

The Controller:

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

And the JavaScript function:

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

NOTE: if the data is null, i let him zoom-out the map, because that's what i wanted to do if choosing Choose a station from the drop-down, which was coming as null.