function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RamsRams 

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

hitesh90hitesh90

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.

 

<button onclick="places(); return false;"> Places</button>

 

 

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

RamsRams
Hi,

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>
&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places">&lt;/script&gt;

<style>
#map {
height: 400px;
width: 600px;
border: 1px solid #333;
margin-top: 0.6em;
}
</style>

&lt;script&gt;
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);

&lt;/script&gt;
</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
hitesh90hitesh90

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

RamsRams

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

hitesh90hitesh90

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