question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Map not clickable inside ion-slide

See original GitHub issue

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)

com.googlemaps.ios 2.5.0 "Google Maps SDK for iOS"
com.synconset.imagepicker 2.1.8 "ImagePicker"
cordova-plugin-actionsheet 2.3.3 "ActionSheet"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-dialogs 1.3.3 "Notification"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-googlemaps 2.1.1 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-request-location-accuracy 2.2.2 "Request Location Accuracy"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.2.1 "SocialSharing"
cordova.plugins.diagnostic 3.7.1 "Diagnostic"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-keyboard 2.2.1 "Keyboard"
uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.7 "Launch Navigator"

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

"@ionic-native/core": "4.3.2",
"@ionic-native/google-maps": "^4.3.3",

Current behavior: When i put a map inside a ion-slide, it shows but i cant click on it, resize, etc

Expected behavior: map should work as normal

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

<ion-content padding>
    <ion-slides #addPointSlider>
        <ion-slide>
            <div id="infoText">
                <p><i class="fa fa-info" aria-hidden="true"></i> Localiza el punto en el mapa y pulsa "Siguiente"</p>    
            </div>
            <div id="mapDiv">
                <div id="mapAdd" style="width:100%; height:100%;"></div>
            </div>
        </ion-slide>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
mackluscommented, Nov 14, 2017

After some test, everything seems to work fine with development version.

Just for testing, i made a testing repository (https://github.com/macklus/ionic3-examples) with two branchs:

  • google-maps-slider
  • google-maps-develop-slider

You can use ionic cordova prepare to install everything (i install a test google console keys).

I close this ticket, thank you for everything!

0reactions
wf9a5m75commented, Nov 15, 2017

Thank you for letting me know. I confirmed this issue has been resolved with your example.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google map inside ion-slides - Stack Overflow
I got the solution,when i give ion-slide instead of ion-slide-page .Now the google map is working perfectly. index.html
Read more >
Click event not working in the last slide - ionic-v3
I'm working with slides component and detect an extraneous behavior. When is seted the loop option to true, the click events on the...
Read more >
ion slide, ion segment and google map · Issue #20896 - GitHub
another issue is when i click on map and add marker or zoom in zoom out and then try to slide , slide...
Read more >
Building a slideshow with Ionic Slides API - Mastering Ionic
In this coding tutorial we will walk through using the Ionic Slides API to create stunning slideshow components for our mobile applications ...
Read more >
How to build Dynamic Ionic 4 Slides with Shopping Cart
In this tutorial we build a simple sliding design with Ionic 4 slides ! Learn to build mobile apps with Ionic...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found