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
Test Dev 81Test Dev 81 

Get value from Javascrpt object

Hi Everyone,
I am getting trouble getting values from JS object in my VF page
  
function airMapInit(geocode_1,geoCode_2) {
                console.log('Geocode_1'+JSON.stringify(geocode_1));
                console.log('Geocode_1'+geocode_1.lat);
}

/////////////////////////////////////////////////////////
LOGs...
Geocode_1{"lat":28.6139391,"lng":77.2090212}
Geocode_1function(){return d}

I want to extract values lat and lng from these variables 
when i do geocode_1.lat i am getting function(){return d} in debug console
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi there,

>> https://www.thephani.com/how-to-save-current-location-using-visualforce-pages/

I see that you are trying to get the location in visualforce page and I was able to find an implementation in the above link can you try checking the above link once?

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Test Dev 81Test Dev 81
Thanks, I am not trying to get the current location
actually, I want draw a line between geocodes bypassing city name or address
but first, I have to get geocodes
i am getting JSON data from the Google API but I am not able to extract lat and lng from the response
  
<apex:page Controller="RT_DistanceCalculator" sidebar="false">
    
    <html>
        <head>
            <title>How to draw route Path on Map using Google Maps Direction API in PHP | Tutorialswebsite</title>
            <style>
                #map-layer {
                max-width: 900px;
                min-height: 550px;
                }
                .lbl-locations {
                font-weight: bold;
                margin-bottom: 15px;
                }
                .locations-option {
                display:inline-block;
                margin-right: 15px;
                }
                .btn-draw {
                background: green;
                color: #ffffff;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
            </head>
            <body>
                <p>How to draw Path on Map using Google Maps Direction API</p>
                <div class="lbl-locations">Travel Mode</div>
                
                <div>
                    <input type="radio" name="travel_mode" class="travel_mode" value="WALKING"/> WALKING
                    
                    <input type="radio" name="travel_mode" class="travel_mode" value="DRIVING" /> DRIVING
                    </div>
                    <div>&nbsp;</div>
                    <div class="lbl-locations">Way Points</div>
                    <div>
                        
                        
                        <div class="locations-option"><input type="text" id="origin" name="way_start" class="way_points" placeholder="Start from" value="New Delhi"/> </div>
                        <br/>
                            <br/>
                            
                            <div class="locations-option"><input type="text" id="destination" name="way_end" class="way_points" placeholder="Destination" value="Oman"/> </div>
                            <input type="button" id="drawPath" value="Draw Path" class="btn-draw" />
                                <br/>
                                <br/>
                                </div>
                            
                            <div id="map-layer"></div>
                            <script>
                                var map;
            var waypoints;
            function initMap() {
                var mapLayer = document.getElementById("map-layer"); 
                var centerCoordinates = new google.maps.LatLng(28.6139, 77.2090);
                var defaultOptions = { center: centerCoordinates, zoom: 8 }
                map = new google.maps.Map(mapLayer, defaultOptions);
                
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
                directionsDisplay.setMap(map);
                
                $("#drawPath").on("click",function() {
                    var start =$("#origin").val();
                    var end = $("#destination").val();
                    drawPath(directionsService, directionsDisplay,start,end);
                    
                });
                
            }
            function drawPath(directionsService, directionsDisplay,start,end) {
                directionsService.route({
                    origin: start,
                    destination: end,
                    optimizeWaypoints: true,
                    travelMode: "TRANSIT"//$("input[name='travel_mode']:checked"). val()
                }, function(response, status) {
                    console.log('response '+response);
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        console.log('Problem in showing direction due to ' + status);
                        geoCode1(start,end);
                        //airMapInit();
                    }
                });
            }
            function geoCode1(start,end) {
                
                var geocoder = new google.maps.Geocoder();
                var address1 = start;//document.getElementById("address").value;
                geocoder.geocode( { 'address': address1}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK){
                        
                        console.log('resP1 '+JSON.stringify(results[0].geometry.location));
                        geoCode2(results[0].geometry.location,end)
                    }
                });
            }
            function geoCode2(geaoCOde_1,end) {
                
                var geocoder = new google.maps.Geocoder();
                console.log('geocode1'+geaoCOde_1);
                var address2 = end;//document.getElementById("address").value;
                geocoder.geocode( { 'address': address2}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK){
                        // do something with the geocoded result
                        // results[0].geometry.location.latitude
                        
                        console.log('resP1 '+JSON.stringify(results[0].geometry.location));
                        airMapInit(geaoCOde_1,results[0].geometry.location);
                    }
                });
                
            }
            
            function airMapInit(geocode_1,geoCode_2) {
                console.log('Geocode_1'+JSON.stringify(geocode_1));
                console.log('Geocode_1'+geocode_1.lat);
                var str1 = JSON.stringify(geocode_1).replaceAll('"','');
                 str1 = str1.replaceAll('"','');
                /*str1 = str1.replaceAll('{','');
                str1 = str1.replaceAll('}','');
                str1 = str1.replace(/\s/g,'');
                var arr1 = str1.split(',');*/
                
                var str2 = JSON.stringify(geoCode_2).replaceAll('"','');
                str2 = str2.replaceAll('"','');
                /* str2 = str2.replaceAll('{','');
                str2 = str2.replaceAll('}','');
                str2 = str2.replace(/\s/g,'');
                var arr2 = str2.split(',');*/
                const map = new google.maps.Map(document.getElementById("map-layer"), {
                    zoom: 3,
                    center: { lat: 0, lng: -180 },
                    mapTypeId: "terrain",
                });
               
                console.log('{lat:28.6139391, lng:77.2090212}');
                
               
                const flightPlanCoordinates = [
                  {lat:21.3727989, lng:79.33528989999999},
                    {lat:24.7135517, lng:46.6752957}
                ];
                console.log('flightPlanCoordinates '+JSON.stringify(flightPlanCoordinates));
                const flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    geodesic: true,
                    strokeColor: "#FF0000",
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    });
                    flightPath.setMap(map);
                    }
                    </script>
            <script src="https://maps.googleapis.com/maps/api/js?key={!$Label.GoogleAuth}&callback=initMap>&callback=initMap">
            </script>
        </body>
    </html>
</apex:page>