I want to make marks on the map with the fields addresses(Shipping and Billing), the fiscal address. it's a custom field for now I do not think I'll converse on the map mark. I understand that it has latitude and longitude the fields but I do not know how to perform the function in javascript to make the marks on the map

I want to make two marks on the map when click on the button "save"

First mark---billing address composed by (BillingStreet,BillingCity,BillingState,BillingPostalCode)

Second mark--- shipping address composed by (ShippingStreet,ShippingCity,ShippingState,ShippingPostalCode)


the view of apex page

   <apex:page standardController="Account">
   <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    <apex:includescript value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" />

    <div id="map" style="width: 1920px; height: 250px"></div>
            var map = L.map('map').setView([-34.610527, -58.380405], 12);
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);

  <apex:form >
    <apex:pageBlock >
    <h1>Nombre de la cuenta</h1>
    <apex:inputField value="{!Account.Name}" />

        <apex:pageBlockSection title="Direccion de facturacion" columns="1">
        <apex:inputField value="{!Account.BillingStreet}" />
        <apex:inputField value="{!Account.BillingCity}" />
        <apex:inputField value="{!Account.BillingState}" />
        <apex:inputField value="{!Account.BillingPostalCode}" />

        <apex:pageBlockSection title="Direccion de Envio" columns="1">
        <apex:inputField value="{!Account.ShippingStreet}"/>
        <apex:inputField value="{!Account.ShippingCity}"/>
        <apex:inputField value="{!Account.ShippingState}"/>
        <apex:inputField value="{!Account.ShippingPostalCode}"/>

        <apex:pageBlockSection title="Direccion Fiscal" columns="1">
        <apex:inputField value="{!Account.FiscalStreet__c}" />
        <apex:inputField value="{!Account.FiscalCity__c}"/>
        <apex:inputField value="{!Account.FiscalState__c}"/>
        <apex:inputField value="{!Account.FiscalPostalCode__c}"/>

      <apex:commandButton action="{!save}" value="Save" />
      <apex:pageBlockButtons >
  <apex:pageMessages />
  • this is a apex page.
    – user65550
    Commented Mar 12, 2019 at 1:58
  • Ok I understand your point please if you want not contribute, please retreat
    – user65550
    Commented Mar 12, 2019 at 2:13
  • Gracias por el consejo pero esta pregunta esta bien en este foro pienso porque no se como llevar los datos del formulario shipping address y billing address que peternecen al objeto Account que provee la API de salesforce y asi obtener su latitud y longtiud para luego marcar el mapa.
    – user65550
    Commented Mar 12, 2019 at 2:19
  • ok, entiendo. No estaba muy claro en tu pregunta. Espero que la respuesta de david te ayudo.
    – glls
    Commented Mar 12, 2019 at 2:22

1 Answer 1


You can add a marker to a Leaflet map like this:

var m = L.marker([latitude, longitude], { 'title': 'Title' })
     .on('click', function(e) {
         // React to a click

That gets you a map marker with a popup, and the opportunity to execute a callback function on click.

Leaflet does not, itself, provide geolocation services. You must have the latitude and longitude you wish to display before you create the map marker.

You can use a geocoding service within Salesforce to automatically populate geolocation fields, but it's not synchronous. When you save your Accounts from Visualforce, you won't instantly get back geocode information. Additionally, geocoding does not support custom address fields; it will only populate geocodes for the standard addresses on the Account. See the Salesforce documentation and release notes for more about setting up geocoding.

Alternately, you can make a callout yourself to your preferred geolocation service to obtain the latitude and longitude corresponding to your address data (before or after saving records), and supply that information to Leaflet.

  • thank you David but I do not understand how use BillingLatitude,BillingLongitude, BillingGeocodeAccuracy Shipping Address, ShippingLatitude. ShippingLongitude ShippingGeocodeAccuracy. and I also do not find examples using leaflet.js for mark the map
    – user65550
    Commented Mar 12, 2019 at 2:02
  • @Fede I provided an example of adding a Leaflet map marker. I am not sure what you are asking regarding the geolocation fields. Rather than posting comments, please edit your question to add any details.
    – David Reed
    Commented Mar 12, 2019 at 2:03
  • Sorry i already edit the question now correctly.
    – user65550
    Commented Mar 12, 2019 at 2:50

You must log in to answer this question.