You need to sign in to do that
Don't have an account?
SFDC-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;
}
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;
}
This code may help:
Also make sure that you are not getting null from the query itself. Also, make sure page get rendered properly.
All Answers
This code may help:
Also make sure that you are not getting null from the query itself. Also, make sure page get rendered properly.
<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>