How to navigate to the user's current GeoLocation?
Navigating to the user’s 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 user’s 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