This problem afflicts chrome, ff and opera (all latest) on fedora 23.
Its a django app which uses angular's uiGmapGoogleMapApiProvider to initialize google maps (v3). I've seen many posts which show a possible solution involving google.maps.events.trigger(map, 'resize'). This does not work for me.
My map gets rendered in the following html snippet:
<section class="section-googlemap">
<ui-gmap-google-map center="map.center" zoom="map.zoom"
options="options"
events="map.events"
control="map.control">
</ui-gmap-google-map>
</section>
For the uiGmapGoogleMapAPIProvider, i've the following codebase:
uiGmapGoogleMapApiProvider.configure({
key: "XXXXYYYY",
v: "3.17",
libraries: "weather,geometry,visualization"
});
Then in another controller, i've the following:
uiGmapGoogleMapApi.then(function(maps) {
$scope.maps = maps;
geocoder = new maps.Geocoder();
});
I've referred to the following SO posts and tried to get this working but to no avail:
Google Map not loading completely after inital call
Google Map shows only partially
Google Map displaying just partially
Please tell me if there is anything else i can do.
Related
I have an angular WebApp in which I use the google Map API. It is loaded in the html view. On click the states changes to another page and loads the map. It is working well for the first time. When I go back to the loading page my console says: You have included the Google Maps API multiple times on this page. This may cause unexpected errors. And when i load the map again, some unexpected errors are happening.
So my question: Is it possible to reset the google Maps API so that it refreshes everytime i go back? Or can i delete the instance or what should i do?
I'm using the angular google maps directive: https://angular-ui.github.io/ and implementing it with:
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript">
On the page who is loading it.
The maps page is loaded with resolving the 'uiGmapgoogle-maps' directive.
I'm using the inline javascript cause i could not figure out how to pass an api key to the directive settings. And I load it before the google maps page so, the maps loads well.
State first page:
.state('apps.vermittlungDetail', {
url: '/vermittlung/detail/:taskID',
templateUrl: 'tpl/apps_vermittlung_detail.html',
controller: 'XeditableCtrl',
resolve: load( ['ui.select','toaster','js/app/globalServices/global-services.js','js/app/vermittlung/newTask-service.js','js/controllers/bootstrap.js','js/app/vermittlung/vermittlung-detail.js','js/app/annulation/annulation-service.js','js/app/smsTool/smsTool-service.js','js/app/emailMami/emailmami-service.js' ,'js/app/vermittlung/vermittlung-service.js', 'smart-table','xeditable','js/controllers/xeditable.js', 'moment'])
})
State second page (the map)
.state('apps.vermittlungGoogleMap', {
url: '/vermittlungMap',
templateUrl: 'tpl/apps_vermittlung_googlemap.html',
resolve: load( ['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js'])
})
HTML second page
<div ng-controller="vermittlungDetailCtrl"> <!--SET CONTROLLER-->
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'" options="markers.options" click="onClickMarker">
</ui-gmap-markers>
<ui-gmap-window options="windowOptions" show="showWindow" coords="windowData.model" closeClick="closeClick()">
<div>
<div class="m-b-sm">{{currentMarkerTitle}}<br>{{currentMarkerPhone}}</div>
<button class="btn btn-info btn-xs" ng-click="$parent.sendMamiSMS($parent.tasktosend,$parent.currentMarkerPhone,$parent.currentMarkerTitle)">SMS senden</button>
</div>
</ui-gmap-window>
</ui-gmap-google-map>
</div>
First, set the controller on your state, not your template.
.state('apps.vermittlungGoogleMap', {
url: '/vermittlungMap',
controller: 'vermittlungDetailCtrl',
templateUrl: 'tpl/apps_vermittlung_googlemap.html',
resolve: load( ['uiGmapgoogle-maps','toaster','js/app/vermittlung/vermittlung-detail.js', 'js/app/vermittlung/vermittlung-service.js'])
})
Then stop importing GoogleMaps like this
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX" type="text/javascript">
Angular Google Maps already does it.
To manipulate the map and insert your API key, take a look here.
The answer from mcrvaz solved my problem. I removed the inline javascript file. And loaded it uiGmapgogole map Instance in the controller. Like in the docs.
.controller("someController", function($scope, uiGmapGoogleMapApi) {
// Do stuff with your $scope.
// Note: Some of the directives require at least something to be defined originally!
// e.g. $scope.markers = []
// uiGmapGoogleMapApi is a promise.
// The "then" callback function provides the google.maps object.
uiGmapGoogleMapApi.then(function(maps) {
});
});
I was missing putting "uiGmapGoogleMapApi" in the controller head.
I'm using Angular Google Maps to implement a map and geo-location in my Ionic app. I do everything according to the docs, but the map isn't displaying (even though there isn't any console output showing errors).
Controller:
app.controller('panicController', ['$scope', '$cordovaGeolocation',
function($scope, $cordovaGeolocation) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
}
]);
View:
<ion-view hide-nav-bar="true" ng-controller="panicController" class="panic-view">
<ion-content data-tap-disabled="true" class="padding">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</ion-content>
</ion-view>
SCSS:
.angular-google-map-container {
height: 100%;
}
When I run it, I just get a blank/empty white view. And my console output:
Any idea of what the issue could be?
maybe this example can help you._
nightly codepen
I used this example in my application too and I like the way.
Do you need to develop it this way?
Greetz,
Bernhard
Try removing the sensor parameter. But according to the docs, it should not affect the API's behavior. It looks like there's something else going on that shows you the white view.
From the Google Maps API Docs: https://developers.google.com/maps/documentation/javascript/error-messages
SensorNotRequired: The sensor parameter is no longer required for the
Google Maps JavaScript API. It won't prevent the Google Maps
JavaScript API from working correctly, but we recommend that you
remove the sensor parameter from the script element.
In my case the solution was to explicitly specify dependency to uiGmapgoogle-maps via module, so make sure uiGmapgoogle-mapsmodule is included:
var app = angular.module('ionicApp', ['ionic', 'uiGmapgoogle-maps']);
Demo
Hello i am newbie to onsenUI and angular js,I found a function "pushpage" for navigate to another page,But i have searched since two days in how to pass a value to another page ,Please help me to figure out this as i have wasted 2 days in this..:( my code is
Content =
'<ons-button onclick=gallery.pushPage("dishes.html");>'
+data['Details'][i]['varName'] + data['Details'][i]['intGlCode'] +'<br>'+
'</ons-button>';
}
You can pass a value in the options argument of the pushPage call. Like this:
nav.pushPage('page.html', {value: 10});
You can then retrieve the value by doing:
console.log(nav.getCurrentPage().options.value);
It is not clear from your question if you're using AngularJS or some other framework for your app. If you are using AngularJS you can fetch the value in the controller of your pushed page.
You have a template or a page like this:
<ons-template id="page.html">
<ons-page ng-controller="PageController">
...
</ons-page>
</ons-template>
And in your controller you can do like this:
module.controller('PageController', function($scope) {
console.log($scope.nav.getCurrentPage().options);
});
If you are not using AngularJS you can get the value by waiting for the 'pageinit' event. I'll use jQuery as an example:
HTML:
<ons-page id="page">
...
</ons-page>
JavaScript:
$(document).on('pageinit', '#page', function() {
// Do something.
});
You can use a global variable like in a single page application !
Hello im working on a web app project, and we are using jquery mobile for the pages ui and angular for mvc reasons,
Im having a problem using my external pages ( pages that ive load to my index.html), they dont recognize my controllers (only works the controllers that ive put in the index.html)
ill some of my code here to explain my problem
if ive put some angular values in my external page (previews declaration of the controller in my
<div data-role="page" id="ResEjecSuc" class=".paginas"
data-dom-cache="true" ng-controlles="categController" >
)
<span ng-class="sucursal.TIT_CATEGORIZACION">
{{sucursal.TIT_REALIZADA}}</span>
my app only shows: {{sucursal.TIT_REALIZADA}}
my controller init code :
app = angular.module('nevadaProt', [])
app.controller('categController', controlerCateg)
controlerCateg = function($scope, $locale) {
var sucursal = {
TIT_CATEGORIZACION:4,
TIT_REALIZADA:12
}
how ive load and after that transition to my html page:
Load:
$.mobile.pageContainer.pagecontainer("load",
"pages/RappidApps2/ResumenEjecZona.html", {});
transition:
$.mobile.pageContainer.pagecontainer("change", "#ResEjecSuc", {
transition : "pop",
reverse : false
});
how can i make work angular controllers and external jquery mobile pages?
Once you are using Angular, you may create a directive.
app.directive('externalHtml', function(){
return {
restrict : 'E'
,replace : true
,templateUrl : 'pages/RappidApps2/ResumenEjecZona.html'
};
});
then, you html should be something like:
<body>
<div data-role="content">
<external-html/>
</div>
</body>
It always works for me.
So I am building an Ionic / AngularJS app using Wistia player API. I finial tried and everything work right on browser test mode. But when compile onto iOs, it just show white screen. Here is the detail:
View - HTML page:
<!-- Wistia Embed -->
<div id="{{ 'wistia_' + mediaHashId }}" class="wistia_embed" style="width:398px;height:224px;" ng-if="mediaHashId"></div>
Controller:
$timeout(function() {
var wistiaEmbed = Wistia.embed($scope.mediaHashId, {
videoFoam: true,
playerColor: "3B97D3"
});
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
So it load perfectly onto Chrome.
But when I compile it onto xcode and run it on my phone. It just show a white screen (with no JS error!)
SECOND OPTION: iframe - since iframe load okay on iOs (http://wistia.com/doc/player-api#using_iframes_and_the_player_api).
The second option is attach wistiaApi onto an iframe. But the code does not work.
View - HTML page:
<div class="video-container">
<iframe id="wistia_player" ng-src="{{ mediaHashId | wistiaEmbedUrl }}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>
</div>
Controller:
$timeout(function() {
var wistiaEmbed = document.getElementById("wistia_player").wistiaApi;
console.log (wistiaEmbed);
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
The wistiaEmbed console log an undefined.
And error log:
TypeError: Cannot read property 'bind' of undefined
at lesson-detail-ctrl.js:46
at ionic.bundle.js:24922
at completeOutstandingRequest (ionic.bundle.js:13604)
at ionic.bundle.js:13984
So clearly .wistiaApi does not work...
I do include this in my index.html:
I will love a AngularJS library like this https://github.com/brandly/angular-youtube-embed with Wistia Player...but no luck...
Wow, I've found the problem. This is actually a very common problem when building ionic apps on iOs and/or Android. When you include <script> tags in your index.html, always put the full http://.... instead of using just //.
In my case, I included the Wistia API via their official documentation like:
<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
It works on browsers because browsers are smart. Devices are not as smart as browsers so by including the http like so:
<script src="https://fast.wistia.com/assets/external/E-v1.js"></script>
Solves it!