CODEWITHSUNDEEP
javascripthtmlgoogle-maps
user1841873
user1841873

Reputation: 33

Having problems in changing Google Maps location

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

Upvotes: 3

Views: 380

Answers (2)

Michael
Michael

Reputation: 11

I can confirm that the "Image corrupt or truncated" error will appear if each number is passed as a string (so parseFloat is needed for DOM extracted strings).

Upvotes: 0

ppeterka
ppeterka

Reputation: 20726

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:

Upvotes: 6

Related Questions