Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

Problem refreshing google maps

$
0
0

I´m developing my first app using ionic, and I´m having problems using google maps in some devices. In my app, the user have to mark his location by clicking on the map. So, each time the user click on the map, I have to delete the previous marker and put a new one in the clicked position. My problem is that in some devices, the user click on a different canvas of the map, the previous marker is deleted but the canvas doesn´t refresh, so the marker is still shown in the previous location.If I change the zoom on the map, all the canvas are refreshed and the marker shows proppertly.
How can I force the whole map to be repainted each time the user clicks on the map? Is that a problem of a cached view? I have tryed using $scope.$apply() without any result. Here is a little sample of my code:

Template:

<ion-view view-title="Location">
	  <ion-content class="padding">
				<div id="map" data-tap-disabled="true"></div>
		</ion-content>
 </ion-view>

Controller:

.controller('MapCtrl1', function($scope) {
var ctrl=this;
var map;
var clickMarker = null;
$scope.$on("$ionicView.enter",function($scopes,states){
ctrl.init();
});
ctrl.init = function(){
clickIcon = new google.maps.MarkerImage('./img/beachflag.png',new google.maps.Size(32, 32), new google.maps.Point(0,0),new google.maps.Point(16, 32));
var myStyles =[{featureType: "poi",elementType: "labels",stylers: [{ visibility: "off" }]}];
var mapOptions = {'zoom': 14,'center': new google.maps.LatLng(0.0,0.0),'mapTypeId': google.maps.MapTypeId.ROADMAP,'scaleControl': true,styles: myStyles ,mapTypeControl: true,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,position: google.maps.ControlPosition.LEFT_BOTTOM},zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},streetViewControl: false};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$scope.map = map;
google.maps.event.addListener(map, 'click', onClickCallback);
};
function onClickCallback (event) {
$rootScope.latitud=event.latLng.lat();
$rootScope.longitud=event.latLng.lng();
resetMap();
clickMarker = new google.maps.Marker({
'position': event.latLng,
'map': map,
'title': event.latLng.toString(),
'clickable': false,
'icon': clickIcon
});
map.setCenter(event.latLng);

}

function resetMap(){
if (clickMarker != null) {
clickMarker.setMap(null);
clickMarker = null;
};
}

})

Thanks


Viewing all articles
Browse latest Browse all 228595

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>