Hi all,

I am trying to center a Google map on a location that is entered by the user.  A web service passes the city and state and retrieves the coordinates of said location and returns them to the controller.  I have a 'Get Map' button that calls a javascript function which should display and center the map using the coordinates from the controller.  The map is centered in the Indian Ocean. . . .

Now when I call the properties using outputtext tags in visualforce, they hold the value of the coordinates; however, when I call the properties in a JS function, they are null.  I have very little experience with JS.  Thanks in advance.

When debugging the JS, I get an error: *Uncaught ReferenceError: myLatlng is not defined.

----------------------------------------------------------------------------------------
Here is the function that my 'Get Map' button invokes:

<script>      
        function initialize() {
        var lat = '{!lng}';   // SHOULD HOLD CORRECT LNG BUT IS NULL
        var lng = '{!lat}';   // SHOULD HOLD CORRECT LAT BUT IS NULL
        var myLatlng = new google.maps.LatLng(lat,lng);
        var mapOptions = ({
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
   
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
</script>

<apex:form id="frm">
   
    <apex:pageblock id="pblck">
    <apex:pageblocksection id="pbsectn" >
    <apex:inputtext value="{!city}" label="City" required="True"/>
    <apex:selectlist value="{!states}" multiselect="false" size="1" label="State" required="True">
        <apex:selectoptions value="{!items}"/>
    </apex:selectlist>
    </apex:pageblocksection>
    <apex:pageblockbuttons >
        <apex:commandButton action="{!submitRequest}" value="Sumbit Request" rerender=""/>
        <apex:commandbutton onclick="initialize()" value="Get Map" rerender="map-canvas"/>
    </apex:pageblockbuttons>
   
   
    <apex:pageblocksection id="results">
    <apex:outputtext value="{!lat}" id="lat"/>
    <apex:outputtext value="{!lng}" id="lng"/>   //CORRECT LAT AND LNG
    </apex:pageblocksection>
   
</apex:pageblock>
   
    <div id="map-canvas" style="width:100%;height:300px"></div>   // DOES NOT CENTER WITH CORRECT LAT AND LNG
    </apex:form>


------------------------------------------------------------------------------------------------
This is my controller for the visualforce page:

public decimal lat{get;set;}
public decimal lng{get;set;}

public decimal getlat(){
        return lat;
    }
   
    public void setlat(decimal lat) {
        this.lat = lat;
    }
    public decimal getlng() {
           return lng;
        }
         
    public void setlng(decimal lng) {
        this.lng = lng;
    }

public pagereference submitRequest(){
        googlenearbystorages gns = new googlenearbystorages(type, city, states, zipcode);
        lat = decimal.valueof(gns.latitude);
        lng = decimal.valueof(gns.longitude);       
    return null;
    }