I'm trying to disable the toolbar on android but am receiving setMapToolbarEnabled does not exist on type GoogleMap.
this.map.setMapToolbarEnabled(false);
is there another way to do this? I tried this too, and it didn't work.
this.map = this.googleMaps.create(element, {
'backgroundColor': 'white',
'controls': {
'compass': false,
'mapToolbar':false
},
Any ideas?
it works just dont forget to add api in the app.moel.ts in the proovider also
https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/
Related
i am building a mobile Game with Phaser and Ionic and want to add AdMob.
I installed this plugin:
https://github.com/admob-plus/admob-plus
cordova plugin add cordova-admob-plus --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx
In the page that is using AdMob i added this:
declare var admob;
Then i can show an ad by using this:
admob.banner.show({
id: {
ios: 'ca-app-pub-xxx~xxx',
}
});
But i need to change the Banner-Size.
Someone know how can i change the size from
"SMART_BANNER" to "BANNER"?
Thank you very much!
First, run npm uninstall #ionic-native/admob-plus. This wrapper implementation was never finished and is missing several IBannerRequest options necessary to be used propely.
Instead, declare admob:
declare var admob;
Then you can reference the Cordova plugin directly. I was able to get it to work by specifying width and height:
admob.setDevMode(true);
admob.banner.show({
id: 'ca-app-pub-3940256099942544/2934735716', //iOS test ID
size: {
width: 300,
height: 250
}
}).then((res) => {
console.debug('banner show success');
}).catch(err => {
console.error('banner show failure');
});
This allows for the hide method to accept the ID argument it needs to dismiss banner ads properly:
admob.banner.hide('ca-app-pub-3940256099942544/2934735716');
API reference for cordova-admob-plus banners can be found here:
https://admob-plus.github.io/docs/show-banner.html
Have you tried this already?
admob.banner.show({
id: {
ios: 'ca-app-pub-xxx~xxx',
},
size: 'BANNER'
});
In my ionic project, what I have done is following.
const banner = new this.admob.BannerAd({
adUnitId: 'ad-unit-id',
size: AdSizeType.BANNER
});
await banner.show();
I'm using Ionic Photo Viewer to show images in full screen. My HTML is:-
<ion-slides>
<ion-slide col-12 *ngFor="let image of businessImages | async">
<div class="main-slider-image" [defaultImage]="'assets/imgs/default_image_slider.png'" [lazyLoad]="image.thumb400Url" [offset]="100" (click)="openImage(image.originalUrl)">
</div>
</ion-slide>
</ion-slides>
On TypeScript:-
openImage(url) {
this.photoViewer.show(url, "", { share: false });
}
On Android is working like this:-
Click here to see Android version
On the other hand, on the iPhone is working like this:-
Click here to see iPhone version
On the iPhone, the photo viewer doesn't open the photo. I've tried:-
openImage(url) {
this.photoViewer.show(url);
}
But this also didn't work. If you've any idea how to solve this issue please share. Thank you
This issue is really crazy and had to spend lots of time to figure out the solutions. The solutions is all the parameters in the 'options' variable are required.
Follow this:
const options = {
share: true, // default is false
closeButton: true, // default is true
copyToReference: true, // default is false
headers: "", // If it is not provided, it will trigger an exception
piccasoOptions: { } // If it is not provided, it will trigger an exception
};
this.photoViewer.show(url, "", options);
At least I had to revert to 1.1.11 (found from NPM) to show IOS properly. For Android, latest version seemed to work.
Share did not seem to work for IOS in 1.1.11. In Android latest photo-viewer plugin it seemed to work. So now I have:
private viewPhoto(url: string): void {
if (url && url != 'assets/images/profile.png') {
this.photoViewer.show(url, '', { share: this.platform.is('android') });
}
}
And.. I think the correct place to discuss these is https://github.com/sarriaroman/photoviewer/issues.
And another thing, I'm considering to use another plugin, https://github.com/Riron/ionic-img-viewer. Some of the photoviewer issues had a link to this but haven't tried it yet.
I have the same error, and im solve with this
ionic cordova plugin rm com-sarriaroman-photoviewer
ionic cordova plugin add com-sarriaroman-photoviewer#1.1.18
npm install --save #ionic-native/photo-viewer
on your function, if device using ios, decodeURIComponent was the answer
showImage(url,title) {
var options = {
share: true, // default is false
closeButton: true, // iOS only: default is true
copyToReference: true // iOS only: default is false
};
if (this.platform.is("ios")) {
url = decodeURIComponent(url);
}
this.photoViewer.show(url, title, options);
}
Currently it seems that the fullscreen ability can only be activated from a user action (mouse/keyboard event). Is there a way to circumvent this?
Now, you can just add the state:"fullscreen" property on your main .js:
chrome.app.runtime.onLaunched.addListener(
function() {
chrome.app.window.create('index.html',
{
state: "fullscreen",
}
);
}
);
Make sure you don't add resizable: false or bounds properties, and you add a "fullscreen" permision on the manifest.json.
{
...
"permissions": [
...
"fullscreen"
]
}
You can use the HTML5 Fullscreen API, which requires a user action:
button.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
or the more "app-y" way using the AppWindow object, which doesn't require a user action:
chrome.app.window.current().fullscreen();
Both need the "fullscreen" permission in the manifest.json.
I have got it working with below code
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'width': 1024,
'height': 768
},
function(win) {
win.maximize();
});
});
Check out https://plus.google.com/100132233764003563318/posts/2SuD7MVd8mG referring to recently landed changelist https://chromiumcodereview.appspot.com/12205002. You can lift sample code from either of those sources:
document.body.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
Make sure in your manifest you're requesting the "fullscreen" permission and that you're testing on a sufficiently recent Chrome build (beta channel ought to have this feature by now, and dev definitely does).
Your question specifically refers to packaged apps, but in case anyone reading this answer missed this, this will work only with Chrome packaged apps.
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',{},function(window) {
window.fullscreen();
});
});
manifest.json
{
...
"manifest_version": 2,
"minimum_chrome_version": "23",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": ["fullscreen"]
}
Edit: Per BeardFist's comment, my original answer was wrong on two fronts. You can do this on a Chrome Extension (which this is tagged as), but probably not on a packaged app.
For extensions you can make it go fullscreen using the state:"fullscreen" option, which can be applied with chrome.window.update. The code below chains the creation of the window via chrome.windows.create with chrome.window.update. In my experiments you could not set the fullscreen state directly through the window creation.
chrome.windows.create(
{url:"PATH/TO/POPUP"},
function(newWindow) {
chrome.windows.update(newWindow.id, {state:"fullscreen"})
});
I am using iScroll v4 in Phonegap 2.1.0 + IOS. I have a two iscroll in two different pages.
First iscroll
function locationload() {
locationScroll = new iScroll('locationWrapper', {
vScrollbar: false,
hScrollbar: false,
hScroll: false
});
}
Second iscroll
function preferenceload() {
preferencesScroll = new iScroll('preferencesWrapper', {
vScrollbar: false,
hScrollbar: false,
hScroll: false
});
}
In first page iScroll worked fine. Second page iScroll also worked fine. but when i click a button in second page, button click event fire multiple times. If i remove the iScroll in second page, button click event works fine. I am using $.mobile.changePage("#Page2", null, true, true); to navigate to Page2.
I can't find any solution anywhere so I am hoping someone here can throw me some ideas.
Thanks
I think you should try jquery-mobile-iscrollview
I'm making a mobile-app using Phonegap and HTML. Now I'm using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ?
Hope someone can help me. Thanks in advance.
There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
There is currently a pull request on github, but this hasn't been merged yet.
However, you can simply use this patched version of fastclick.
The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:
FastClick.attach(document.body, {
excludeNode: '^pac-'
});
This reply may be too late. But might be helpful for others.
I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.
So for having fastClick and google suggestions, I have added this code in geo autocomplete
jQuery.fn.addGeoComplete = function(e){
var input = this;
$(input).attr("autocomplete" , "off");
var id = input.attr("id");
$(input).on("keypress", function(e){
var input = this;
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.2555, -121.9245),
new google.maps.LatLng(37.2555, -121.9245));
var options = {
bounds: defaultBounds,
mapkey: "xxx"
};
//Fix for fastclick issue
var g_autocomplete = $("body > .pac-container").filter(":visible");
g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
$(".pac-item", this).addClass("needsclick");
});
//End of fix
autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
//Handle place selection
});
});
}
if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in F7:
function targetNeedsFastClick(el) {
var $el = $(el);
if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
return true;
}
So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children
I was having the same problem,
I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).
The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.
Therefore when user clicks on item in list the focusout event is not fired.
It's dirty, but it works
worked perfectly for me :
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Configuration: Cordova / iOS iphone 5