I've this controller to set or get position on google maps by inserting address or get position from browser/mobile localization:
//MAPPE
.controller('mapCtrl', function($scope, $ionicLoading, $ionicModal, $compile, $timeout) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(41.9100711,12.5359979);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow()
}
$scope.centerOnMe = function() {
if(!$scope.map) {return;}
$ionicLoading.show({
template: 'Cerco la posizione...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var infoWindow = new google.maps.InfoWindow()
var marker = new google.maps.Circle({
strokeColor: '#F90',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FC0',
fillOpacity: 0.35,
map: $scope.map,
center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
radius: 100
});
marker.content = '<div class="infoWindowContent">Tu sei qui</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>LA TUA POSIZIONE</h2>Questo è il punto indicato dal tuo GPS!</br>Se ci sono errori clicca sul punsante in basso a destra e scrivi il tuo indirizzo');
infoWindow.open($scope.map, marker);
});
$ionicLoading.hide();
$scope.markers.push(marker);
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$ionicModal.fromTemplateUrl('templates/position.html', {scope: $scope}).then(function(modal) {$scope.modal = modal});
$scope.closePosition = function() {$scope.modal.hide()};
$scope.searchPoint = function() {$scope.modal.show()};
$scope.doPosition = function() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('indirizzo').value;
var infoWindow = new google.maps.InfoWindow();
geocoder.geocode({'address': address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var latlng = results[0].geometry.location;
var latiSearch = results[0].geometry.location.lat();
var lonSearch = results[0].geometry.location.lng();
$scope.map.setCenter(new google.maps.LatLng(latiSearch, lonSearch));
var marker = new google.maps.Circle({
strokeColor: '#F90',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FC0',
fillOpacity: 0.35,
map: $scope.map,
center: new google.maps.LatLng(latiSearch, lonSearch),
radius: 100
});
$scope.map.panTo(marker.getPosition());
marker.content = '<div class="infoWindowContent">Tu sei qui</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>'+address+'</h2>Questo è l\'indirizzo che hai indicato.</br> Ti ricordiamo che NESSUNO potrà vedere in dettaglio dove ti trovi, ma avrà solo un\'indicazione approssimativa in chilometri!');
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
$scope.map.panTo(marker.getPosition());
$scope.closePosition();
} else {alert('La geolocalizzazione non è andata a buon fine: ' + status)}
});
$timeout(function(){$scope.closePosition()}, 1000)
}
})
All works fine, but when position is taken or address inserted, and marker created, I receive this error:
TypeError: marker.getPosition is not a function
------> $scope.map.panTo(marker.getPosition());
So panTo dont work! Where is my error???
The reason you are getting getPosition is undefined is because, according to the docs, it does not exist, here's the link.
The root of the problem is actually that you are passing the wrong objects to $scope.map.panTo();
. Please refer to the google website for panTo on the Map class, you must pass it the same type of object it is expecting in the parameters.
panTo(latLng:LatLng|LatLngLiteral);
This is saying that it excepts a parameter of either an instance of the LatLng class or LatLngLiteral class, not the Circle instance that you are creating above.
Here's the reference to LatLng.
To fix your code above you can change from this:
$scope.map.panTo(marker.getPosition());
to this
$scope.map.panTo(new google.maps.LatLng(latiSearch, lonSearch));
I'd also recommend to store the instance you are already creating above for $scope.map.setCenter()
to the same one you will be using here.