Javascript : Using Switch to set variables values for the function

Question

Hello am totally new to Javascript , but i need it for using googlemaps in my project , am trying to set values for the latitude , longitude and map zoom for every certain city , so am getting the city name from a hidden form input and using Switch to switch regarding the city name .

cityDiv = document.getElementById('id_city');
cityDiv.value = idCity ;

switch (idCity)
{
case "city1":
    var map_long = 31.37667;
    var map_lat = 31.04306;
    var map_zoom = 3;
    break
case "city2":
    var map_long = 31.33333;
    var map_lat = 29.85;
    var map_zoom = 7;
    break
default:
    var map_long = 31.37667;
    var map_lat = 31.04306;
    var map_zoom = 3;
}

function onLoad() {
    map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.centerAndZoom(new GLatLng(map_lat,map_long) , map_zoom);

    GEvent.addListener(map, 'click', function(overlay, point) { 
     if (prev_pin) { 
      map.removeOverlay(prev_pin); 
      prev_pin = null; 
     } 
     //var yPoint = new YGeoPoint({{ place.latitude }},{{ place.longitude }});

     if (point) { 
      pin = new GMarker(point); 
      map.addOverlay(pin); 
      prev_pin = pin; 

      latDiv = document.getElementById('id_latitude');
      lngDiv = document.getElementById('id_longitude'); 
      lngDiv.value = point.x;
      latDiv.value = point.y; 
     } 
    });

}

Sorry for this newbie question .

Best regards .

EDIT from comment by geowa4:

The question and the problem are The Variables never set :( , so whats wrong with my code ?! i change "cityDiv.value = idCity ; " to " var idCity = cityDiv.value ; " which didn't work as well but this time the map refuses to load

Answer 1

Have you tried dumping your values, stepping through and debugging? Alert statements, or console.log() statements, to see what the page thinks the value of that select is?

You might also consider making an object, that you can then update:

// Untested, but you should get the gist
var cityInfo = {
    map_long = 0.0;
    map_lat = 0.0;
    map_zoom = 0;
};

switch (idCity) {
case "city1":
    cityInfo.map_long = 31.37667;
    cityInfo.map_lat = 31.04306;
    cityInfo.map_zoom = 3;
    break
case "city2":
    cityInfo.map_long = 31.33333;
    cityInfo.map_lat = 29.85;
    cityInfo.map_zoom = 7;
    break
default:
    cityInfo.map_long = 31.37667;
    cityInfo.map_lat = 31.04306;
    cityInfo.map_zoom = 3;
}

Answer 2

Your problem is scope, pure and simple. Using var scopes your variables to the current lexical scope, which in the case of var map_long = 31.37667; et al is the switch statement. Once you fall out of that scope, any variables declared in that scope vanish unless an external reference is maintained. You could remove the var statement, but that would make the variables global. I would recommend declaring your variables in a scope that makes sense to you, making them global only if absolutely necessary.

Answer 3

Try the code below:

mapInfo = 
{
  "city1":
  {
    "long": 31.37667,
    "lat": 31.04306,
    "zoom": 3
  },
  "city2":
  {
    "long": 31.33333,
    "lat": 29.85,
    "zoom": 7
  }
};

function onLoad() {
    map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var cityDiv = document.getElementById('id_city');
    var idCity = cityDiv.value || "city1";
    map.centerAndZoom(new GLatLng(mapInfo[idCity].lat,mapInfo[idCity].long) , mapInfo[idCity].zoom);

    GEvent.addListener(map, 'click', function(overlay, point) { 
        if (prev_pin) { 
                map.removeOverlay(prev_pin); 
                prev_pin = null; 
        } 
        //var yPoint = new YGeoPoint({{ place.latitude }},{{ place.longitude }});

        if (point) { 
                pin = new GMarker(point); 
                map.addOverlay(pin); 
                prev_pin = pin; 

                latDiv = document.getElementById('id_latitude');
                lngDiv = document.getElementById('id_longitude'); 
                lngDiv.value = point.x;
                latDiv.value = point.y; 
        } 
    });

}