angularjs - ionic framework google map iphone and android simulator not working -
ionic framework google map working on browser, not iphone/android simulator.
i try google api server key, ios key, android key , browser key generate google console api, still show blank on simulator.
controller('mapctrl', function($scope, $ionicloading, $compile) { function initialize() { var mylatlng = new google.maps.latlng(43.07493,-89.381388); var mapoptions = { center: mylatlng, zoom: 16, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions); //marker + infowindow + angularjs compiled ng-click var contentstring = "<div><a ng-click='clicktest()'>click me!</a></div>"; var compiled = $compile(contentstring)($scope); var infowindow = new google.maps.infowindow({ content: compiled[0] }); var marker = new google.maps.marker({ position: mylatlng, map: map, title: 'uluru (ayers rock)' }); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.adddomlistener(window, 'resize',function(){ var center = map.getcenter(); google.maps.event.trigger(map, "resize"); map.setcenter(center); }) $scope.map = map; } google.maps.event.adddomlistener(window, 'load', initialize); $scope.centeronme = function() { if(!$scope.map) { return; } $scope.loading = $ionicloading.show({ content: 'getting current location...', showbackdrop: false }); navigator.geolocation.getcurrentposition(function(pos) { $scope.map.setcenter(new google.maps.latlng(pos.coords.latitude, pos.coords.longitude)); $scope.loading.hide(); }, function(error) { alert('unable location: ' + error.message); }); }; $scope.clicktest = function() { alert('example of infowindow ng-click') }; })
remove code google.maps.event.adddomlistener(window, 'load', initialize); , put initialize(); above function initialize(). because google map not on first tab, it's on last tabs.
Comments
Post a Comment