ionic framework - Google maps centered load failure -
well i'm having problem, load map once , works perfect. second time or once update map not load ok, not centered load when navigating on can see marks made deformed or lost.
i have tried several ways solve problem, first , common found use google.maps.event.trigger(map 'resize')
did not work , logic, try whenever loading map executed, create new map, same data , focused neither worked me. may way use map. using plugin of camera in application, user takes photo , should detect draw picture , display map. each time view opened, plug of camera, in process of taking , show picture call appropriate functions load map , has me bit tricky loaded have time locked in problem, found solutions serve me browser, device not work. using ionic framework , plugins cordova.
controller :
.controller("camaractrl", function($scope,$rootscope, camera,$cordovageolocation,$state,$location,$ionicsidemenudelegate) { var posoptions = {timeout: 10000, enablehighaccuracy: false}; $cordovageolocation .getcurrentposition(posoptions) .then(function (position) { var latitud_actual = position.coords.latitude var longitud_actual = position.coords.longitude $scope.latitud = latitud_actual; $scope.longitud = longitud_actual; //$scope.map = new google.maps.map(document.getelementbyid("mapa_ubicacion"), mapoptions); }, function(err) { // error }); function initialize() { var mapoptions = { center: new google.maps.latlng($scope.latitud, $scope.longitud), zoom: 15, maptypeid: google.maps.maptypeid.roadmap, scrollwheel: false }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions); $scope.setmarker(map, new google.maps.latlng($scope.latitud, $scope.longitud), 'yo', ''); $scope.map = map; } $scope.setmarker = function(map, position, title, content) { var marker; var markeroptions = { position: position, map: map, title: title }; marker = new google.maps.marker(markeroptions); google.maps.event.addlistener(marker, 'click', function () { // close window if not undefined if (infowindow !== void 0) { infowindow.close(); } // create new window var infowindowoptions = { content: content }; infowindow = new google.maps.infowindow(infowindowoptions); infowindow.open(map, marker); }); } $scope.mostrar_form = false; $scope.mostrar_boton_view = false; $scope.getphoto = function() { camera.getpicture().then(function(imageuri) { console.log(imageuri); $scope.lastphoto = imageuri; $scope.mostrar_form = true; $scope.mostrar_boton_view = false; google.maps.event.adddomlistener(window, 'load', initialize); initialize(); }, function() { $scope.mostrar_boton_view = true; }, { quality: 75, targetwidth: 320, targetheight: 320, savetophotoalbum: false }); }; $scope.getphoto(); })
the solution found create function executes map again. should not optimal @ least solved problem.
$scope.centrar = function(){ var mapoptions = { center: new google.maps.latlng($scope.latitud, $scope.longitud), zoom: 15, maptypeid: google.maps.maptypeid.roadmap, scrollwheel: false }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions); $scope.setmarker(map, new google.maps.latlng($scope.latitud, $scope.longitud), 'yo', ''); $scope.map = map; }
Comments
Post a Comment