Cordova-plugin-googlemaps: groundOverlay zIndex problem

[gogogoalealeale]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [ ] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-chrome-apps-common 1.0.7 "Chrome Apps Common Utils"
cordova-plugin-chrome-apps-socket 1.2.3 "Chrome Apps Socket API"
cordova-plugin-chrome-apps-sockets-udp 1.3.0 "Chrome Apps Sockets UDP API"
cordova-plugin-chrome-apps-system-network 1.1.2 "Chrome System Network API"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-crosswalk-webview 2.3.0 "Crosswalk WebView Engine"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-firebase 0.1.24 "Google Firebase Plugin"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-local-notification 0.8.4 "LocalNotification"
cordova-plugin-tts 0.2.3 "TTS"
cordova-plugin-whitelist 1.3.2 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

Current behavior:
I created a groundOverlay png image in my map, but I don't want the google map markers(below is screen capture highlight in red line) show on png image whenever set zIndex to 999... it's still not working.
Expected behavior:
Just setting zIndex to make image higher than goggle map markers layer.
Screen capture or video record:

Related code, data or error log (please format your code or data):

        map.addGroundOverlay({
            url: 'images/map.png',
            bounds: bounds,
            opacity: 1,
            zIndex: 999,
            clickable: true
        }, function(groundOverlay) {
            groundOverlay.on(plugin.google.maps.event.GROUND_OVERLAY_CLICK, function(event) {
                if (editable) {
                    placeMarker(map, event.latLng);
                } else {
                    here =
                    {
                        lat: event.lat,
                        lng: event.lng
                    }
                }
            });

        });

[wf9a5m75]

You can change the map styles (aka styled map).

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/class/Map/getMap/README.md#create-a-map-with-initialize-options

https://mapstyle.withgoogle.com

[gogogoalealeale]

Thanks for your mapstyle link, but it hide all the markers... I want show all markers except specific area in my png image.

[wf9a5m75]

Not possible

[wf9a5m75]

The icon comes from native API. Not this plugin. The only possible way is to create markers that not clickable and flat.

[gogogoalealeale]

This web demo is work!
is possible setting zIndex higher than markers?

[wf9a5m75]

Did you try the multiple_maps branch?

[gogogoalealeale]

Can't add multiple_maps branch...(already removed master)

C:\Users\zebra\indoorNavigation-android>cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="XXXXXXXXX" --variable API_KEY_FOR_IOS="XXXXXXXXXXX"
(node:10528) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Failed to fetch plugin https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: cmd: Command failed with exit code 1 Error output:
npm WARN addRemoteGit Error: not found: git
npm WARN addRemoteGit     at getNotFoundError (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:14:12)
npm WARN addRemoteGit     at F (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:69:19)
npm WARN addRemoteGit     at E (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:81:29)
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:90:16
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\node_modules\isexe\index.js:44:5
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\node_modules\isexe\windows.js:29:5
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm WARN addRemoteGit     at FSReqWrap.oncomplete (fs.js:123:15)
npm WARN addRemoteGit  git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps resetting remote C:\Users\zebra\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-mapsplugin-cordova-plugin-googlemaps-git-multiple-maps-19e06bb0 because of error: { Error: not found: git
npm WARN addRemoteGit     at getNotFoundError (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:14:12)
npm WARN addRemoteGit     at F (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:69:19)
npm WARN addRemoteGit     at E (C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:81:29)
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\which.js:90:16
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\node_modules\isexe\index.js:44:5
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\which\node_modules\isexe\windows.js:29:5
npm WARN addRemoteGit     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
npm WARN addRemoteGit     at FSReqWrap.oncomplete (fs.js:123:15) code: 'ENOGIT' }
npm ERR! git clone --template=C:\Users\zebra\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror https://github.com/mapsplugin/cordova-plugin-googlemaps.git C:\Users\zebra\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-mapsplugin-cordova-plugin-googlemaps-git-multiple-maps-19e06bb0: undefined
npm ERR! git clone --template=C:\Users\zebra\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror https://github.com/mapsplugin/cordova-plugin-googlemaps.git C:\Users\zebra\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-mapsplugin-cordova-plugin-googlemaps-git-multiple-maps-19e06bb0: undefined
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps" "--production" "--save"
npm ERR! node v6.11.3
npm ERR! npm  v3.10.10
npm ERR! code ENOGIT

npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\zebra\indoorNavigation-android\npm-debug.log

[wf9a5m75]

That is npm problem, not this plugin's problem.

[wf9a5m75]

Try this way.

$> git clone https://github.com/mapsplugin/cordova-plugin-googlemaps

$> git checkout multiple_maps

$> git pull

$> cd (project dir)

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add (path to)/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..." 

[gogogoalealeale]

Still have problem~~

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
Error: /Users/wolfysu/Indoordirection/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /Users/wolfysu/Indoordirection/platforms/android/src/plugin/google/maps/MyPluginLayout.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/actions/ReserveIntents;

[wf9a5m75]

Why don't you search with Google? I'm not your teacher.
https://stackoverflow.com/a/44593496/697856

[gogogoalealeale]

Anyway, I just want groundOverlay setting zIndex higher than markers,
Do you have any idea?

[wf9a5m75]

no

[wf9a5m75]

Ask to Google

[wf9a5m75]

I confirmed with Google Maps team. There is no solution.

[gogogoalealeale]

@wf9a5m75 Thank you for help, I will find some workaround solution.