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
swaarnimdevswaarnimdev 

How to build map with marker to get geolocation.

I have a simple code for getting geolocation based on address on a custom object.
I want to place the geolocation marker on map and allow the user to change the location by dragging around the marker (if its mispalced).
Best Answer chosen by swaarnimdev
Swati GSwati G
Here is the sample code of how you can get latitude and longitude from address.

Geocoding: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple 

Once you get latitude and longitude, you can plot that location on map as a marker. Then add dragend event on marker which will allow you to get the marker drag event and eventually return you the new locations lat and lng. using this lat lng, you can get the address using reverse geocoding.

Reverse geocoding: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse


For second requirement, As per my understanding you want to show the custom object's records which are some radius away from the current record?

For this, you will have to create geolocation field on custom object. Store latitude and longitude of custom object and then you can use geolocation query in apex where you can define radius and subject lat lng.

Geolocation soql: https://developer.salesforce.com/blogs/developer-relations/2012/10/winter-13-using-apex-and-soql-with-geolocation.html 

All Answers

Swati GSwati G
Hi,

You can find google map documentation here https://developers.google.com/maps/documentation/javascript/3.exp/reference 

Below is the sample code.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

      function initialize() {
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.4419, -122.1419), // set the center same as your custom object location or any point you want
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
     
        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(37.4419, -122.1419), // set the marker lat lng as your custom object location
          draggable: true
        });
         
        // Add listner to drag end event
        google.maps.event.addListener(marker, 'dragend', function(evt){
              // You can access the lat lng where marker is dropped though evt as shown below
              // You can call actionfunction here and pass this information and save it to the custom object field
              alert('Latitude: '+evt.latLng.lat()+ ' & Longitude'+evt.latLng.lng());

          });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>


You can also try your google map code in google playground
https://code.google.com/apis/ajax/playground/#draggable_marker_v3
swaarnimdevswaarnimdev
Thank you, Swati can u help customise it.
Swati GSwati G
Hi,

What customization you want to achieve?
swaarnimdevswaarnimdev
It is to be integreated with a custom object. The user will first type in the address, which will show as marker on the map, then the user might change postion and the geo location is to be updated accordingly.
Secondly in searching records same will be applied with a marker and radius (dynamically changeable). 
Swati GSwati G
Here is the sample code of how you can get latitude and longitude from address.

Geocoding: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple 

Once you get latitude and longitude, you can plot that location on map as a marker. Then add dragend event on marker which will allow you to get the marker drag event and eventually return you the new locations lat and lng. using this lat lng, you can get the address using reverse geocoding.

Reverse geocoding: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse


For second requirement, As per my understanding you want to show the custom object's records which are some radius away from the current record?

For this, you will have to create geolocation field on custom object. Store latitude and longitude of custom object and then you can use geolocation query in apex where you can define radius and subject lat lng.

Geolocation soql: https://developer.salesforce.com/blogs/developer-relations/2012/10/winter-13-using-apex-and-soql-with-geolocation.html 
This was selected as the best answer
swaarnimdevswaarnimdev
Thank you Swati. Do you work as freelancer also?
Swati GSwati G
Yes, whenever I get time I do other work.
Ajit JainAjit Jain
Hi swaarnimdev,

I saw your this post and I am working on the same requirement. Can you please help me to complete this. If possible please share your skypeid or mail-id with me. 

Thanks
Ravindar AdminRavindar Admin
I am new here,where to write that code?
James Jacob 1James Jacob 1
I am working on a project on get geo location of user. I built my location (https://where-am-i.live) app to find out the user's current location using Map Box Api.