-1

Link of the code:

http://www.aspsnippets.com/Articles/Get-Current-Location-Latitude-and-Longitude-using-JavaScript-and-HTML5.aspx

Code:

<apex:page>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    });
} else {
    alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</apex:page>
  • The best way to debug Javascript is to open the Google Chrome dev console and see the logs. – Martin Lezer Feb 16 '17 at 8:11
0

As Saumya Ranjan said, update the google map js to https src="https://maps.googleapis.com/maps/api/js?sensor=false" Or remove the protocol so that it will automatically take the browser protocol src="//maps.googleapis.com/maps/api/js?sensor=false". Both will work.

Another point I noticed, you have not handled your code in case the browser permission is denied. You should handle as below.

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Permission Granted");
},
function (error) { 
  if (error.code == error.PERMISSION_DENIED)
      alert("Permission Denied");
});

Updated code:

<apex:page>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">    
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    },
    function (error) { 
        if (error.code == error.PERMISSION_DENIED){
            alert("Location permission denied by user.");
        }
    });
} else {
    alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</apex:page>
  • I tried , that above code. Sometimes it is not coming in Google chrome. now it is showing Error: ! oops something went wrong. This page didn't load Google Maps correctly. see javaScript console for technical details. – Ravindar Admin Feb 17 '17 at 10:24
  • This is the standard way to implement the MAP API as provided by Google, there is nothing wrong with this code. I think this is related to API Key. Please check this link churchthemes.com/page-didnt-load-google-maps-correctly – Saroj Bera Feb 17 '17 at 10:33
0

Change the url to https ;

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

Otherwise it will block it as not-secured script.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.