Articles in this section
Category / Section

How to navigate to the user's current GeoLocation?

1 min read

Navigating to the users GeoLocation can be achieved by getting the respective latitude and longitude of that location.

The following steps help you meet the requirement.

Step 1: Create a map sample and include necessary script files.

Step 2: By using the following snippet you can get the users current location as latitude and longitude, and based on this you can navigate to the specified location.

HTML

        navigator.geolocation.getCurrentPosition(showPosition);

In the following code example is used the markerTemplate to denote the navigated location, based on respective latitude and longitude.

You can refer the following online documentation link for more details on using the markerTemplate.

http://help.syncfusion.com/ug/js/documents/mapelements.htm

Sample Location for Markers:

http://js.syncfusion.com/demos/web/#!/azure/map/DataMarkers

HTML

<body>
<div class="content-container-fluid">      
            <div class="row">                
                <div class="cols-sample-area"> 
                                     <div style="min-height:400px">                
                                                   <div id="map" >
                                                </div>
            </div>            
                <button  onclick="getLocation()">NavigateTo Current Location</button>                    
        </div>                                                                
    </div>
</div>
<script type="text/javascript">
                                   jQuery(function ($) {                                                
                $("#map").ejMap({                   
                             . . .
                    layers: [
                        {                            
                              . . .
                                shapeData: world_map
                         }
                    ]
                });
            });
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {   
    var level = 4;
    $("#map").ejMap("navigateTo", position.coords.latitude, position.coords.longitude, level);
    var mapObj = $("#map").data("ejMap");
    mapObj.model.layers[0].markers = [{ latitude: position.coords.latitude, longitude: position.coords.longitude }];
    $("#map").ejMap("refreshMarkers");
}          
      </script>  
</body> 

Screenshot:

In the following example, you can see that the Chennai location with its corresponding latitude and longitude, as the current location and when you click the NavigateToCurrentLocation button, it starts to navigate to Chennai.

Figure 1: GeoLocation

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied