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
Rakshana Cube84Rakshana Cube84 

Can we display our current location on Gmap by using visualforce page

Hi Everyone,

This is interesting to know. I want to display my current location on the Google map by using Visualforce page. That can be fetched the longitude and latitude values too.

Thanks,
Rakshana 
Best Answer chosen by Rakshana Cube84
Ekta KanderaEkta Kandera
Hi Rakshana,

Try this code. 
<apex:page standardController="Account" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" >
    <style>
      #map {
        width: 100%;
        height: 400px;
      }
    </style>

    <div id="map">Loading map ...</div>

    <script>

        renderMap = function (canvas, latitude, longitude) {
            var latLng = {lat: latitude, lng: longitude};
            var map = new google.maps.Map(canvas, {
                center: latLng,
                zoom: 14
            });
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: 'You Are Here'
            });
        }
        
          function initMap() {
            var mapDiv = document.getElementById('map');
    
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        renderMap(mapDiv, position.coords.latitude, position.coords.longitude);

                    },
                    function(error) {
                        document.getElementById('map').innerHTML = 'Error:' + error.code + ' x ' + error.message;
                    }
                );
                
            } else {
                document.getElementById('map').innerHTML = 'Geolocation not supported';
            }
    
          }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

</apex:page>

Thanks.

All Answers

Rakshana Cube84Rakshana Cube84
Please help on this ASAP. Hope someone will
Ekta KanderaEkta Kandera
Hi Rakshana,

Try this code. 
<apex:page standardController="Account" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" >
    <style>
      #map {
        width: 100%;
        height: 400px;
      }
    </style>

    <div id="map">Loading map ...</div>

    <script>

        renderMap = function (canvas, latitude, longitude) {
            var latLng = {lat: latitude, lng: longitude};
            var map = new google.maps.Map(canvas, {
                center: latLng,
                zoom: 14
            });
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: 'You Are Here'
            });
        }
        
          function initMap() {
            var mapDiv = document.getElementById('map');
    
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        renderMap(mapDiv, position.coords.latitude, position.coords.longitude);

                    },
                    function(error) {
                        document.getElementById('map').innerHTML = 'Error:' + error.code + ' x ' + error.message;
                    }
                );
                
            } else {
                document.getElementById('map').innerHTML = 'Geolocation not supported';
            }
    
          }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

</apex:page>

Thanks.
This was selected as the best answer
Rakshana Cube84Rakshana Cube84
Hi Ekta Kandera,

Thank you & I am so excited. Now I can see the map accurately where I am. But one more thing is here to share is the pin drop symbol can be there to point out another location. As soon as I pined, the alert will show up with the latitude and longitude values.

Thanks
Rakshana