Log In
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
    How to: Change the Map Marker Icon
    How to: Change the Map Settings Dynamically
    How to: Customize the Vector Map Palette
    How to: Draw Lines on a Map using Google Maps API
    How to: Set the Latitude and Longitude of a Map Marker to the Current Location
    How to: Show a Current Location on a Map
    How to: Specify the Map Center Using Human-Readable Location Instead of Numeric Coordinates
  [Expand]Miscellaneous UI Customizations
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
This documentation page describes implementations made in our v17.2 release cycle. To learn about functionality shipping with v18.1, navigate to our updated help file experience at docs.devexpress.com. Learn More

How to: Show a Current Location on a Map

This topic describes how to access the dxMap widget directly using JavaScript code and show a current position on a map in a Mobile application.

  • Add the ShowCurrentLocationController View Controller to the Mobile module project.
  • In the constructor, set the ViewController.TargetViewId property, for example, to MapsMarker_ListView.
  • Override the OnViewControlsCreated method and access the MobileMapsListEditor List Editor and its Map control.
  • Specify the control's Map.OnCustomize property with the string which is the JavaScript client-side event to get a current position using the navigator.geolocation.getCurrentPosition() method and set this position as the map's center. Note that JavaScript code should be enclosed in brackets.

The result is demonstrated in the image below.

Is this topic helpful?​​​​​​​