I'm currently working with Angular-Google-MAP and I'm trying to add a marker to the map. However, whenever I click on the map, I receive an error message saying
$scope.map.control.getGMap is not a function
. This error is occurring within the geocodePosition()
function when the Map click event is triggered. Can someone please help me understand why this is happening?
<ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="map-canvas" events="map.events">
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" events="markerEvents" icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
In controller
function MapController($scope, GMapReady, GoogleMapApi, $timeout) {
GMapReady.promise().then(
var map={
center: {
latitude: 21.1458004,
longitude: 79.08815460000005
},
bounds : {northeast : { latitude : 79.08815460000005, longitude : 79.08815460000005},
southwest : { latitude : 79.08815460000005, longitude : 79.08815460000005}},
zoom: 5,
control : {}
};
$scope.map=map;
$scope.map.events ={
click: function(map, eventName, originalEventArgs){
var e=originalEventArgs[0];
var lat=e.latLng.lat(),lon=e.latLng.lng();
var latlng = new google.maps.LatLng(lat, lon);
geocodePosition(latlng);
}
}// end of Map event
);
function geocodePosition(pos){
.....some code .......
......................
var map_obj=$scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map_obj);
};
}