Angular module to generate device-specific map urls
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

mapular logo


Build Status

A simple Angular module for generating device-specific map urls. Allows responsive sites to open the device-native maps app from your Angular app. Mapular currently supports generating map urls from coordinates. Desktop browsers will be sent to the Google Maps website.


A demo of the module can be found at


<a ng-href="{{ mapsUrl({ latitude: property.latitude, longitude: property.longitude }) }}">My Location</a>

Would render as <a href="//,-1.148695">My Location</a> on an iOS device, which would open in the Apple Maps app when clicked.

Default behaviour

Platform Version Map provider
iOS any Apple Maps
Android >= 5.0 RFC5870 geo:
Android < 5.0 Google Maps
Windows Phone any Bing Maps bingmaps:
Desktop all Google Maps

The default scheme for unknown devices is //,y


Bower component

Mapular is available via bower, simply

bower install mapular --save

Or explicity add Mapular to your bower.json dependencies:

"dependencies": {
  "mapular": "1.x.x",

Include the component

Add Mapular to your page template, somewhere after Angular

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/mapular/src/mapular.js"></script>

Whitelisting URL schemes

You will need to add the geo and bingmaps url scheme to your href whitelist to prevent Angular prefixing the url with unsafe:

  function ($compileProvider) {
    // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)

Contributing and Issues

The list of supported user agents is not exhastive but does provide a sensible baseline. Any contributions to expand the list of supported user agents in the test suite or to cover edge cases are welcome.


Mapular is available under the MIT license.