function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
UtrivUtriv 

populate geocode (latitude and longitude)

I have embed a google maps in one of my custom objects. Based on the customer's address, the map is being displayed on the page. But how can I generate geocode (latitude and longitude) for the address? Any suggestions please.

Thank you in advance!

Starz26Starz26

Here is some Javascript I used in a VF page to generate a map. Part of it was getting the lat long from an address (From the account Record)

 

latlong example result is: (42.0338837, -87.6719253)

 

<!-- Google Maps API include -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

//Addy is the String Address

function mapinitialize(add, i) {

    var address = add; 
    var latlng;
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        latlng = results[0].geometry.location;
 
        
           var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var eleID = "map_canvas" + i;
            map = new google.maps.Map(document.getElementById(eleID),
                myOptions);
            
            //var marker = new google.maps.Marker({
            //    map: map,
            //    position: latlng
            //});
            placeMarker(latlng);
            

        } else {
            if( status == google.maps.GeocoderStatus.ZERO_RESULTS){
                j$("[id$=map_canvas" + i + "]").css('display','none');
                j$("[id$=map_error1" + i + "]").css('display','block');
            }else{
                alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
            }
        }
    });
    

 }

 
UtrivUtriv

Thank you Starz26... But I am not able to display even a map now...I copied and paste your code to vf page but the page displays your code not the map or geocode...please help..
Starz26Starz26

I did not include any <script> </script> tags.

 

You will need to take what is there and implement into what you already have.
KitagawaSan805KitagawaSan805

Would it be possible to turn something like this into a trigger that could populate the lat / lon fields? I am fairly new to apex / vf... 

 

Any help is greatly appreciated! 

 

-Justin 
DannyK88DannyK88

Hi,

 

I tried using this code in my visualforce page but I couldn't get it to work.

Could you please add the full visualforce code and Apex Controller (if there is on) so that I could get a better understanding of how this code fits into the page.

 

Thanks,
Starz26Starz26

The code I posted has elements specific to the application I was using it for.

 

As an example, the variable addy and i being passed into the function were defined by me for my needs.

 

You will need to modify this code to fit your needs. How you call the code is up to your implementation. You could do it in a jquery .ready() function or the click of a button for example

 

 

 

<!-- Google Maps API include -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>


function mapinitialize() {

    var address = 'YOURADDRESSHERE'; 
    var latlng;
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        latlng = results[0].geometry.location;
 
        
           var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var eleID = 'THE DOM ID OF YOUR MAP CANVAS'
            map = new google.maps.Map(document.getElementById(eleID),
                myOptions);
            
            placeMarker(latlng);
            

        } else {
            if( status == google.maps.GeocoderStatus.ZERO_RESULTS){
                j$("YOUR MAP CANVAS SELECTOR").css('display','none');
                j$("YOUR MAP ERROR DIV SELECTOR").css('display','block');
            }else{
                alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
            }
        }
    });
    

 }

function placeMarker(location, m) {
  var marker = new google.maps.Marker({
      position: location,
      map: m
  });

  
}

 
DannyK88DannyK88

Hi,

 

I took the code you gave me and tried to use it in my own visualforce page. However I still get a blank page. Is there something wrong with the way I am coding this?

In place of the ADDRESS word I have my own address.

 

Visualforce Page Code:

 

<apex:page >
<!-- Google Maps API include -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">
function mapinitialize() {
    
    var address = 'ADDRESS';
    
    var latlng;
    alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode( { 'address': address}, function(results, status) {
      
      if (status == google.maps.GeocoderStatus.OK) {
        
        latlng = results[0].geometry.location;
 
        
           var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var eleID = 'map_canvas'
            map = new google.maps.Map(document.getElementById(eleID),
                myOptions);
            
            placeMarker(latlng);
            

        } else {
            
            if( status == google.maps.GeocoderStatus.ZERO_RESULTS){
                j$("id$=map_canvas").css('display','none');
                j$("id$=map_error").css('display','block');
            }else{
                alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
            }
        }
    });
    
    google.maps.event.addDomListener(window, 'load', initialize);
 }

function placeMarker(location, m) {
  var marker = new google.maps.Marker({
      position: location,
      map: m
  });

  
}
</script>
<apex:form >
    <input type="button" value="Reverse Geocode" onclick="mapinitialize();"/>
    <div id="map_canvas" ></div>
    <div id="map_error"></div>
</apex:form>
</apex:page>

 

Thanks,
Starz26Starz26

Simple,

 

you need to set the height and width of your div. Also, I forgot to pass the map opject to the placemarker function.

 

Also, ensure you have the google address in your remote site settings.

 

<apex:page id="thepage">
<!-- Google Maps API include -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">


function mapinitialize() {
    
    var address = 'YOUR ADDRESS';
    var latlng;
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode( { 'address': address}, function(results, status) {
  
      if (status == google.maps.GeocoderStatus.OK) {
        
        latlng = results[0].geometry.location;

           var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var eleID = 'map_canvas'
            map = new google.maps.Map(document.getElementById(eleID),
                myOptions);
            
            placeMarker(latlng, map);
            

        } else {
            
            if( status == google.maps.GeocoderStatus.ZERO_RESULTS){
                /* Your Error Implementation Here */
            }else{
                alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
            }
        }
    });
    
    google.maps.event.addDomListener(window, 'load', initialize);
 }

function placeMarker(location, m) {
  var marker = new google.maps.Marker({
      position: location,
      map: m
  });

  
}
</script>
<apex:form id="frm">
    <apex:commandbutton id="cmd_btn" value="Reverse Geocode" onclick="mapinitialize();" rerender="msgs"/>
        <div id="map_canvas" style="width: 800px; height: 600px;"></div>
        <div id="map_error"></div>

</apex:form>
</apex:page>

 
DannyK88DannyK88

Hi,

 

Thanks that worked great.

 

Thanks,
pixariuspixarius
Hello, I would like to get coords in google. 
I have an address on my case like: Address_street__c&Address_City__c&Address_PostalCode__c
And I would like to get Address_Geolocalisation__c from Google  
with a formula like: http://maps.googleapis.com/maps/api/geocode/json?address & 
Is it possible ?
Thanks
 
Shiva_SfdcShiva_Sfdc
https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example