+ Start a Discussion
SFDC-NOOBSFDC-NOOB 

How to center Google Map with Get Set properties for coordinates

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

Best Answer chosen by SFDC-NOOB
AshwaniAshwani
You don't need to use get set in condition when you already define get set during variable assignment.

This code may help:

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


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

Also make sure that you are not getting null from the query itself. Also, make sure page get rendered properly.

All Answers

AshwaniAshwani
You don't need to use get set in condition when you already define get set during variable assignment.

This code may help:

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


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

Also make sure that you are not getting null from the query itself. Also, make sure page get rendered properly.
This was selected as the best answer
Deepak Kumar ShyoranDeepak Kumar Shyoran
Use below code to modifying it by providing your key and coordinate hope it'll help you.
<div class="mapContainer">
            <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxYour keyXXXXXXXX&sensor=false"></script>
            <script>
             latitude.push({!sc.Address__r.LatLong__latitude__s}) ;
             longitude.push({!sc.Address__r.LatLong__longitude__s}) ;
             sechduleId.push('{!sc.Id}') ;
            </script>
            <div id="{!sc.Id}" style="width:360px;height:230px;" >
</div>


SFDC-NOOBSFDC-NOOB
Thanks for your replies.  I wrapped my JS function in output panel tags and used the ID to rerender and get the lat and lng.  The map is now centered correctly.


<apex:outputpanel id="jspanel"> 
     <script>      
        function initialize() {
        var lat = '{!lat}';
        var lng = '{!lng}';
        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:outputpanel>