Having problems in changing Google Maps location

Question

I have a liitle problem when i try to change location. I`m connected to map

var mapOptions = {
   zoom: 7,
   center: new google.maps.LatLng(48.379433, 31.165579999999977),
   mapTypeControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

And now I need to change location on the map

<select onChange="changeCity()" id="city"><option value="50.4501, 30.523400000000038">Київ</option><option value="49.839683, 24.029717000000005">Львів</option></select>

For that I`m using:

function changeCity() {
   var city = document.getElementById('city').value;
   var city_1 = new google.maps.LatLng(city);
   map.setCenter(city_1);
}

But nothing happens (i see grey area). Please help...!

Answer 1

The problem is that

somefunction("xx.xxxxxxx, xx.xxxxxxx");

is not equivalent to

somefunction(xx.xxxxxxx, xx.xxxxxxx);

Your values in the option tags are specified as single string instances, like "50.4501, 30.523400000000038" for Kiev. Notice the double quotes.

The new LatLng() constructor would expect two numeric values. So you have to parse the value string into separate latitude and longitude values and pass them to the new LatLng() constructor:

function changeCity() {

    var cityString = document.getElementById('city').value;
    //value string is split into two parts by the ',' character
    var arrayOfValues = cityString.split(','); 
    //parse latitude string part to a floating point value (first part)
    var lat = parseFloat(arrayOfValues[0]);
    //parse longitude string part to a floating point value (second part)
    var lon = parseFloat(arrayOfValues[1]);
    //create new LatLng instance with correct values
    var city_1 = new google.maps.LatLng(lat, lon);
    map.setCenter(city_1);
}

Reference:

• Google Maps API docs: LatLng