A MapKit plugin for Apache Cordova, forked from https://github.com/imhotep/MapKit
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
sample
src
www
.fetch.json
README.md
package.json
plugin.xml

README.md

MapKit plugin for iOS and Android

Uses Apple Maps on iOS and Google Maps v2 on Android

Currently only works/tested on Android and iOS. Requires Cordova 3.0+ (will not work on earlier versions without modifications).

Cordova Map 1

Cordova Map 2

Cordova Map 3

Cordova Map 4

Android specific

You need a Google Maps Android v2 API KEY from google and you need to specify it when you install the plugin

You can install this plugin with plugman

plugman install --platform android --project android-mapkit-example/ --plugin /path/to/MapKit --variable API_KEY="YOUR_API_KEY_FROM_GOOGLE"

or with cordova CLI

cordova -d plugin add /path/to/MapKit --variable API_KEY="YOUR_API_KEY_FROM_GOOGLE"

(/path/to/MapKit could be the git repository https://github.com/imhotep/MapKit)

Follow the instructions that are displayed after you install the plugin.

Sample code

var app = {
    showMap: function() {
        var pins = [
        {
            lat: 49.28115,
            lon: -123.10450,
            title: "A Cool Title",
            snippet: "A Really Cool Snippet",
            icon: mapKit.iconColors.HUE_ROSE
        },
        {
            lat: 49.27503,
            lon: -123.12138,
            title: "A Cool Title, with no Snippet",
            icon: {
              type: "asset",
              resource: "www/img/logo.png", //an image in the asset directory
              pinColor: mapKit.iconColors.HUE_VIOLET //iOS only
            }
        },
        {
            lat: 49.28286,
            lon: -123.11891,
            title: "Awesome Title",
            snippet: "Awesome Snippet",
            icon: mapKit.iconColors.HUE_GREEN
        }];
        var error = function() {
          console.log('error');
        };
        var success = function() {
          mapKit.addMapPins(pins, function() { 
                                      console.log('adMapPins success');  
                                  },
                                  function() { console.log('error'); });
        };
        mapKit.showMap(success, error);
    },
    hideMap: function() {
        var success = function() {
          console.log('Map hidden');
        };
        var error = function() {
          console.log('error');
        };
        mapKit.hideMap(success, error);
    },
    clearMapPins: function() {
        var success = function() {
          console.log('Map Pins cleared!');
        };
        var error = function() {
          console.log('error');
        };
        mapKit.clearMapPins(success, error);
    },
    changeMapType: function() {
        var success = function() {
          console.log('Map Type Changed');
        };
        var error = function() {
          console.log('error');
        };
        mapKit.changeMapType(mapKit.mapType.MAP_TYPE_SATELLITE, success, error);
    }
}

Configuration

You can override the options by passing a suitable options object as arguments to showMap

var options = {
  height: 460, // height of the map (width is always full size for now)
  diameter: 1000,   // unused for now
  atBottom: true,   // bottom or top of the webview
  lat: 49.281468,   // initial camera position latitude
  lon: -123.104446  // initial camera position latitude
};

Sample App

Checkout the sample/ application as a boilerplate!

Missing features

Info bubbles: Simple info bubbles supported (title, snippet and custom icons for markers). Custom info bubbles not supported (i.e HTML bubbles etc..).

License

Apache

Credits for iOS

  • Brett Rudd @goya
  • Becky Gibson @becka11y