Google Maps Plugin

Stable Version 4.1.1 (Compatible with OutSystems 11)
Other versions available for 10
Published on 17 Sep (2 days ago) by 
5.0
 (4 ratings)

Google Maps Plugin

Details
Google Maps Plugin for Cordova
Read More

*** The all new performant Google Maps Plugin for your mobile applications.***

This plugin uses native Google Maps rendering engine which is outruns javascript implementation in both performance and reliability.

Installation

1) Get the API Keys for Android and IOS using the instructions available on the plugin page: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Phonegap-Usage (sections 4a and 4b)

2) Configure the API Keys under Extensibility Configurations under the Advanced section of the GoogleMapsPlugin module's root settings, replacing <Your API Key> by the corresponding key. Please note when creating the keys they may have certain requirements like being exclusive to IOS or Android, or being tied to a specific bundle id or signing certificate SHA1 fingerprint.

Notes on usage

  • In terms of webview rendering, there are some special characteristics to this plugin. It tracks for touch events outside the context of the webview, therefore some considerations need to be taken into consideration when defining the interactions in pages which are using this plugin.
    • Elements which are defined inside the OverlayContent have touch events tracking, therefore you can logic inside the map canvas here;
    • Elements outside the map, which render over the map area, do not track touch events, so you need to use a special JavaScript action (map.setClickable(true/false)) to disable touch events on the map;
    • This is specially important in the case of OutSystem's menus, which render on top, and for which we don't have a specific means to trap the opening/closing event, so recommendation is to either rely on bottom bar navigation, or to use the Back button instead of the menu option.
  • The plugin is resource intensive, therefore it only supports one map per page. If you need more than one map, please use the Google Maps Mobile plugin, which uses Google's JavaScript API.
  • On IOS the plugin requires a special setting for the status bar, that needs to be defined in your eSpace for the map overlay to match the placeholder for the map:
    StatusBarOverlaysWebView=true
    If you need to redefine this setting, you will probably need to adjust the placement of the Map div, as described in this GitHub Wiki page.

Special notes on future versions

All feedback is welcome, please reach out!

Credits

https://github.com/masashiGMS

Licensing

Apache 2.0

What’s new (4.1.1)
  • Minor issues 
  • Works with Mabs 7.2
  • Demo Added


{

    "preferences" : {

        "global" : [

            {

            "name" : "StatusBarOverlaysWebView",

            "value" : "true"

            },

            {

            "name": "GOOGLE_MAPS_ANDROID_API_KEY",

            "value": "XXX"

            },

            {

            "name": "GOOGLE_MAPS_IOS_API_KEY",

            "value": "XXX"

            }

        ],

        "android": [{

            "name": "android-minSdkVersion",

            "value": 23

        }]

    }

}


Reviews (0)