Apex Code Development You need to sign in to do that
Don't have an account?
Rams Html Code is not working in apex:form
Hi,
If i include apex:form tag. This is not working.. Actually i am displaying the markers in map which are having 500 miles distance with current location address. This is working fine when i use the code with out using apex:form tag. If i use <apex:form> tag when i click on the button it will automatically refreshing the page. I dont want to refresh the page. Please let me know, how can i do this. Thanks in advance.
My code is:
<apex:page >
<!-- <apex:form >-->
<html>
<head>
<meta charset="utf-8"/>
<title>Google Maps JavaScript API v3 Example: Place Search</title>
<div id="MyEdit">
This text will change
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<style>
#map {
height: 400px;
width: 600px;
border: 1px solid #333;
margin-top: 0.6em;
}
</style>
<script>
var map;
var infowindow;
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
var lat1;
var lng1;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
lat1=lat;
lng1=lng;
//alert('I AM HERE');
codeLatLng(lat, lng)
}
function places()
{
initialize1(lat1,lng1);
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
alert(results[0].formatted_address)
document.getElementById("MyEdit").innerHTML = results[0].formatted_address;
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
city= results[0].address_components[i];
break;
}
}
}
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function initialize1() {
var pyrmont = new google.maps.LatLng(lat1, lng1);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<button onclick="places()"> Places</button>
</body>
</html>
<!-- </apex:form>-->
</apex:page>
Thanks,
Lakshmi
Hi Ram,
You have to made one change in your <apex:page> code.
uncommnet the <apex:form> tag and write return false; after the paces(); in <button> tag.
Important :
Hit Kudos if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.
Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator
Thanks for your solution. I did this with rerender.
How to get the loop variables in to apex hidden variable. Can you help me pls.
<apex:page controller="map_example">
<apex:form >
<html>
<head>
<meta charset="utf-8"/>
<title>Google Maps JavaScript API v3 Example: Place Search</title>
<div id="MyEdit">
This text will change
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<style>
#map {
height: 400px;
width: 600px;
border: 1px solid #333;
margin-top: 0.6em;
}
</style>
<script>
var map;
var infowindow;
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
var lat1;
var lng1;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
lat1=lat;
lng1=lng;
//alert('I AM HERE');
codeLatLng(lat, lng)
}
function places()
{
initialize1(lat1,lng1);
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
alert(results[0].formatted_address)
document.getElementById("MyEdit").innerHTML = results[0].formatted_address;
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
city= results[0].address_components[i];
break;
}
}
}
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
function initialize1() {
var pyrmont = new google.maps.LatLng(lat1, lng1);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var a=document.getElementById('miles').value;
alert(a);
var request = {
location: pyrmont,
//radius: 500,
radius:a,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
var tmp = new Array();
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
tmp.push(results[i]);
}
}
}
var p='';
function createMarker(place) {
var placeLoc = place.geometry.location;
p+=place.name +'<br/>';
document.getElementById("pl").innerHTML =p;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
alert(p);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<input type="text" id="miles"/>
<div id="pl">
</div>
<apex:inputhidden value="{!miles}" id="pp"/>
<!--<button onclick="places()"> Places</button>-->
<apex:commandButton action="{!referesh}" value="Places" onclick="places()" reRender="map"/>
</body>
</html>
</apex:form>
</apex:page>
If i use this statement in create marker function. It will not work. How can i get all these values in to hidden variable. Please help me..
document.getElementById("pp").innerHTML =p;
Thanks,
Rams
Hi,
Here is the process for get the loop variables in to apex hidden variable
you have to create one Apex class first then take variable and in VF page assign that variable to <apex:inputhidden> and using javascript function like document.getElementById you can set value in that variable.
Important :
Hit Kudos if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.
Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator
Hi,
I did same like that only.But not getting. Can you see my code once.
I have used the input hidden like below statement. {!miles} is coming from apex class.
<apex:inputhidden value="{!miles}" id="pp"/>
And i am assigning values here.
document.getElementById("pp").innerHTML =p;
Please help me where i did mistake.
Thanks,
Rams
Hi,
you have to use value instead of innerHTML
document.getElementById("pp").value = p;Important :
Hit Kudos if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.
Thank You,
Hitesh Patel
SFDC Certified Developer & Administrator