I have a main menu and an item to access the map view. for the first time the map is run according to expectation. the map also can zoom in-out, centerOnMe, and I can give a marker to the position. But when I move or drag the map, the map view was close suddenly and back to main menu. and when I try to access the map again, the map view show but with the main menu view half of it. Here is my js code :
angular.module('starter.controllers')
.controller('LokasiBayarCtrl', function($scope, $ionicLoading, $location, $compile) {
$scope.go = function(path) {
$location.path(path);
};
var map, infoWindow, mapservice,
myLatlng = new google.maps.LatLng(-33.8668283734, 151.2064891821),
mapOptions = {
//center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
},
iconsBase = 'img/marker/',
icons = {
atm: { icon: iconsBase + 'pln.png' }
};
// Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var mapHeight = Math.round( 3 / 5 * window.SCREEN_HEIGHT );
mapHeight = ( window.SCREEN_HEIGHT < 500 ) ? 240 : mapHeight;
$scope.mapHeight = mapHeight;
console.log("map height: " + mapHeight + " screenH: " + window.SCREEN_HEIGHT);
function loading(){
$ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false //true
});
}
function loadingDone(){ $ionicLoading.hide(); }
function centerOnMe(){
if(!$scope.map) {
return;
}
loading();
function successCb(pos) {
myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
$scope.map.setCenter(myLatlng);
var myPosMarker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
draggable: false,
map: map
});
console.log(pos.coords);
console.log('centerOn Me :', map);
searchPlaces();
loadingDone();
}
function errorCb_highAccuracy(error){
console.log('errorCb_highAccuracy : Unable to get location: ' + error.message);
if (error.code == error.TIMEOUT) {
// Attempt to get GPS loc timed out after 5 seconds,
// try low accuracy location
console.log("attempting to get low accuracy location");
navigator.geolocation.getCurrentPosition(
successCb,
errorCb_lowAccuracy,
{maximumAge:600000, timeout:10000, enableHighAccuracy: false});
return;
}
var msg = "Can't get your location (high accuracy attempt). Error = ";
if (error.code == 1)
msg += "PERMISSION_DENIED";
else if (error.code == 2)
msg += "POSITION_UNAVAILABLE";
msg += ", msg = "+error.message;
loadingDone();
console.log(msg);
}
function errorCb_lowAccuracy(error){
var msg = "Can't get your location (low accuracy attempt). Error = ";
if (error.code == 1)
msg += "PERMISSION_DENIED";
else if (error.code == 2)
msg += "POSITION_UNAVAILABLE";
else if (error.code == 3)
msg += "TIMEOUT";
msg += ", msg = "+error.message;
loadingDone();
console.log(msg);
alert(msg);
}
navigator.geolocation.getCurrentPosition(
successCb, errorCb_highAccuracy, {
maximumAge:600000, timeout:5000, enableHighAccuracy: true
});
}
function initialize() {
console.log('init');
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
infoWindow = new google.maps.InfoWindow({
content: compiled[0]
});
mapservice = new google.maps.places.PlacesService(map);
$scope.map = map;
google.maps.event.addListener(map, 'bounds_changed', searchPlaces);
google.maps.event.addListener(map, 'zoom_changed', searchPlaces);
google.maps.event.addListener(map, 'center_changed', searchPlaces);
google.maps.event.addListener(map, 'resize', searchPlaces);
google.maps.event.addListener(map, 'idle', function () {
document.getElementById("map").setAttribute("style", "min-height: 240px; height: "+$scope.mapHeight+"px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0px);");
console.log(document.getElementById("map").getAttribute("style"));
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
centerOnMe();
}
function getPlaceData(result){
return {
name: result.name, address_fmt: result.formatted_address, icon: result.icon, types: result.types,
vicinity: result.vicinity, phone: result.formatted_phone_number, website: result.website
};
}
function searchPlaces(){
console.log('searchPlaces');
// nearby search
var request = {
location: myLatlng,
radius: '1000',
types: ['atm', 'bank'],
rankby: 'prominence'
};
mapservice.nearbySearch(request, searchCb);
}
function searchCb(results, status){
if (status != google.maps.places.PlacesServiceStatus.OK) {
console.log('error');
//alert(status);
console.log(status);
return;
}
console.log(results.length);
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
/*for (var i = 0, result; result = results[i]; i++) {
//if (i < 3) { console.log(result); }
console.log('success');
createMarker(result);
}*/
}
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon : icons['atm'].icon
});
google.maps.event.addListener(marker, 'click', function() {
mapservice.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
console.log(result);
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
$scope.place = getPlaceData(result);
console.log($scope.place);
$scope.$apply(); // ZUL : quick and dirty
});
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
centerOnMe();
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
// main
initialize();
$scope.place = null;
});Please can any one can tell me what's wrong with my code? Previously I apologize because my english is bad, I would be grateful much if anyone can help me.