We Keep Coding

Google Maps Geocoder Marker is not working on AngularJS

I'm working with the Google Maps Geocoder service for AngularJS framework, but hadn't been able to show any markers so far.
Everything else seems to be working fine, but I really need the markers.
Here's my app.js:
angular.module('modelApp', ['ngAnimate', 'ui.bootstrap', 'google-maps'])
.factory('MarkerCreatorService', function () {
var markerId = 0;
function create(latitude, longitude) {
var marker = {
options: {
animation: 1,
labelAnchor: "28 -5",
labelClass: 'markerlabel'
},
latitude: latitude,
longitude: longitude,
id: ++markerId
};
return marker;
}
function invokeSuccessCallback(successCallback, marker) {
if (typeof successCallback === 'function') {
successCallback(marker);
}
}
function createByAddress(address, successCallback) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var firstAddress = results[0];
var latitude = firstAddress.geometry.location.lat();
var longitude = firstAddress.geometry.location.lng();
var marker = create(latitude, longitude);
var results = results[0];
invokeSuccessCallback(successCallback, marker);
} else {
alert("Unknown address: " + address);
}
});
}
return {
create: create,
createByAddress: createByAddress
};
})
.controller('modelCtrl', function ($scope, $http, $timeout, $q, $log, MarkerCreatorService){
// $ajax Init
$scope.model= [];
$http.get('resources/model.json')
.success(function(data){
$scope.model= data;
})
$scope.address = '';
$scope.map = {
center: {
latitude: 0,
longitude: 0
},
zoom: 2,
markers: [],
control: {},
options: {
scrollwheel: false
}
};
$scope.map.markers.push($scope.autentiaMarker);
$scope.addAddress = function() {
var address = $scope.address;
if (address !== '') {
MarkerCreatorService.createByAddress(address, function(marker) {
$scope.map.markers.push(marker);
refresh(marker);
});
}
};
function refresh(marker) {
$scope.map.control.refresh({
latitude: marker.latitude,
longitude: marker.longitude});
$scope.map.zoom = 5;
}
})
Here's the index.html:
<google-map center="map.center"
zoom="map.zoom"
draggable="true"
options="map.options"
control="map.control">
<markers models="map.markers" coords="'self'" options="'options'"
isLabel="true">
</marker>
</google-map>
So, I basically need to show the markers. Do you have any idea about what's wrong with my code?
Any help would be appreciated.

One approach is to convert the callback-based API to a promise-based API:
app.factory('MarkerCreatorService', function ($q) {
//...
function createByAddress(address) {
var geocoder = new google.maps.Geocoder();
var deferred = $q.defer();
geocoder.geocode({'address' : address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var firstAddress = results[0];
var latitude = firstAddress.geometry.location.lat();
var longitude = firstAddress.geometry.location.lng();
var marker = create(latitude, longitude);
var results = results[0];
deferred.resolve(marker);
} else {
alert("Unknown address: " + address);
deferred.reject("Unknown address: " + address);
}
});
return deferred.promise;
}
//...
});
Usage
$scope.addAddress = function() {
var address = $scope.address;
if (address !== '') {
MarkerCreatorService.createByAddress(address).then(function(marker) {
$scope.map.markers.push(marker);
refresh(marker);
});
}
};
By converting it to AngularJS promise, it integrates the API into the AngularJS framework and its digest cycle. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

Update to $scope object in AngularJS Service does not update View

I'm trying to implement Google maps in Angular / IonicFramework. I'm using a directive, a service, and a controller. I have a map, marker, and geolocation object in $scope. The map object and the marker object in the view updates from the service however the geolocation object doesn't.
The template/view:
<div class="item item-input item-stacked-label item-icon-right">
<div>
Location
<a ng-click="centerOnMe()">
<i class="icon ion-android-locate" style="font-size:24px"></i>
</a>
</div>
<textarea style="margin-top: 0px; margin-bottom: 0px; height: 45px;" placeholder="Location not found." disabled>{{geoloc.addr}}</textarea>
</div>
<div class="item item-input">
<div class="input-label">Map</div>
</div>
<div class="item item-input" style="height:15em;">
<ion-content scroll="false">
<map on-create="mapCreated(map, geoloc, marker)"></map>
</ion-content>
</div>
The map directive:
angular.module('starter.directives', [])
.directive('map', function(MapService) {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(43.07493, -89.381388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($element[0], mapOptions);
var geoloc = {
lat: null, lng: null, str: null, brgy: null,
muni: null, reg: null, addr: null
};
var marker = new google.maps.Marker({
map: map
});
$scope.onCreate(
{
map: map, //link map to map in controller
geoloc: geoloc, //link geoloc to geoloc in controller
marker: marker //link marker to marker in controller
});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}
if (document.readyState === "complete") {
initialize();
} else {
google.maps.event.addDomListener(window, 'load', initialize);
}
}
}
});
The map controller:
angular.module('starter.controllers', [])
.controller('MapCtrl', function($scope, $ionicLoading, MapService) {
$scope.mapCreated = function(map, geoloc, marker) {
$scope.map = map; //sets the map from the directive to the $scope
$scope.geoloc = geoloc; //sets the geoloc from the directive to the $scope
$scope.marker = marker; //sets the marker from the directive to the $scope
};
$scope.centerOnMe = function () {
console.log('Centering..');
if (!$scope.map && !$scope.marker && !$scope.geoloc) {
return;
}
$scope.loading = $ionicLoading.show({
template: 'Getting current location...',
noBackdrop: true
});
$scope.geoloc = MapService.getCurrentLocation($ionicLoading, $scope.map, $scope.geoloc, $scope.marker);
// ^^^ This doesn't seem to work. $scope.geoloc doesn't get updated immediately, while $scope.map and $scope.marker gets updated immediately. Has to be invoked twice for $scope.geoloc to be updated.
}
});
The map service:
angular.module('starter.services', [])
.factory('MapService', function() {
return {
getCurrentLocation: function($ionicLoading, map, geoloc, marker) {
navigator.geolocation.getCurrentPosition(function (pos) { //callback if get location succeeds
geoloc.lat = pos.coords.latitude;
geoloc.lng = pos.coords.longitude;
var latlngpos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlngpos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
map.setZoom(16);
marker.setOptions({
position: latlngpos,
map: map
});
geoloc.str = results[0].address_components[0].short_name; //type:route
geoloc.brgy = results[0].address_components[1].short_name; //type:neighborhood
geoloc.muni = results[0].address_components[2].short_name; //type:locatlity
geoloc.reg = results[0].address_components[3].short_name; //type:admnistrative_area_level_1
geoloc.addr = results[0].formatted_address;
} else {
console.log('No results found');
}
} else {
console.log('Geocoder failed due to: ' + status);
}
});
map.setCenter(latlngpos);
$ionicLoading.hide();
}, function (error) { //callback if get location fails
alert('Unable to get location: ' + error.message);
});
return geoloc;
}
}
})
;
I based my implementation here:
http://www.jeffvandalsum.com/integrating-google-maps-api-with-angular/
And I already followed the solutions as suggested here, however the $scope.geoloc object still doesn't update:
Angular directive scope between google maps and a controller
Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directive

Try wrapping
$scope.geoloc = MapService.getCurrentLocation($ionicLoading,$scope.map, $scope.geoloc, $scope.marker);
with $timeout
angular.module('starter.controllers', [])
.controller('MapCtrl', function($scope,$timeout, $ionicLoading, MapService) {
$scope.mapCreated = function(map, geoloc, marker) {
$scope.map = map; //sets the map from the directive to the $scope
$scope.geoloc = geoloc; //sets the geoloc from the directive to the $scope
$scope.marker = marker; //sets the marker from the directive to the $scope
};
$scope.centerOnMe = function () {
console.log('Centering..');
if (!$scope.map && !$scope.marker && !$scope.geoloc) {
return;
}
$scope.loading = $ionicLoading.show({
template: 'Getting current location...',
noBackdrop: true
});
$timeout(function(){
$scope.geoloc = MapService.getCurrentLocation($ionicLoading, $scope.map, $scope.geoloc, $scope.marker);
// ^^^ This doesn't seem to work. $scope.geoloc doesn't get updated immediately, while $scope.map and $scope.marker gets updated immediately. Has to be invoked twice for $scope.geoloc to be updated.
});
}
});
Side Note: This isn't necessarily the best way, but it should trigger your $scope.geoloc to to update correctly.
I would also suggest Gajotres's tutorial.
Hope this was helpful!

I just rewrote my directive, service, and controller, and now it's working. the data now is contained in the service. Then I just injected the service to the directive and the controller.
The map service:
.factory('MapService', function() {
var service = {};
service.map = null;
service.marker = null;
service.geoloc = {
lat: 0.0,
lng: 0.0,
str: "",
brgy: "",
muni: "",
reg: "",
addr: ""
};
service.init = function(map, marker) {
this.map = map;
this.marker = marker;
}
service.getCurrLoc = function($ionicLoading) {
navigator.geolocation.getCurrentPosition(function (pos) { //callback if get location succeeds
service.geoloc.lat = pos.coords.latitude;
service.geoloc.lng = pos.coords.longitude;
var latlngpos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var geocoder = new google.maps.Geocoder();
service.marker = new google.maps.Marker({
position: latlngpos,
map: service.map
});
//get location
geocoder.geocode({'latLng': latlngpos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
service.map.setZoom(16);
service.marker.setOptions({
position: latlngpos,
map: service.map
});
service.geoloc.str = results[0].address_components[0].short_name; //type:route
service.geoloc.brgy = results[0].address_components[1].short_name; //type:neighborhood
service.geoloc.muni = results[0].address_components[2].short_name; //type:locatlity
service.geoloc.reg = results[0].address_components[3].short_name; //type:admnistrative_area_leveservice
service.geoloc.addr = results[0].formatted_address;
service.map.setCenter(latlngpos);
$ionicLoading.hide(); //hide loading prompt
} else {
console.log('No results found');
}
} else {
console.log('Geocoder failed due to: ' + status);
}
});
},
function (error) { //callback if get location fails
},
{ enableHighAccuracy: true }); //geolocation options
}
return service;
})
The map directive:
.directive('map', ["MapService", function(MapService) {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
function initialize() {
var mapOptions = {
//set to Philippines
center: new google.maps.LatLng(14.6839606, 121.0622039),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MapService.map = new google.maps.Map($element[0], mapOptions);
MapService.marker = new google.maps.Marker({
map: MapService.map
});
$scope.onCreate(
{
map: MapService.map, //link map to map in controller
marker: MapService.marker, //link marker to marker in controller
geoloc: MapService.geoloc //link geoloc to geoloc in controller
}
);
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}
if (document.readyState === "complete") {
initialize();
} else {
google.maps.event.addDomListener(window, 'load', initialize);
}
}
}
}])
The map controller:
.controller('MapCtrl', ["$scope", "$ionicLoading", "MapService", function($scope, $ionicLoading, MapService) {
$scope.mapCreated = function(map, marker, geoloc) {
$scope.map = map; //sets the map from the directive to the $scope
$scope.marker = marker; //sets the marker from the directive to the $scope
$scope.geoloc = geoloc; //sets the geoloc from the directive to the $scope
console.log('$scope.geoloc in $scope.mapCreated', $scope.geoloc);
$scope.centerOnMe();
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.geoloc && !$scope.map && !$scope.marker) {
console.log($scope.map);
console.log($scope.marker);
console.log($scope.geoloc);
return;
}
$scope.loading = $ionicLoading.show({
template: 'Getting current location...',
noBackdrop: true
});
MapService.getCurrLoc($ionicLoading);
}
}])

How to pass variable to a function call in angular forEach

I am using a leaflet Directive to show maps on openStreet map.To list all markers my code looks like this :
$scope.goTo = function() {
restAPI.getSomething().success(function(data) {
var anArray = data.lists;
console.log(anArray);
var anotherList = {};
angular.forEach(anArray, function(value, key) {
if (value.geolocation) {
$scope.project = value;
anotherList[anArray[key].ao] = {
lat: value.lat,
lng: value.lng,
focus: false,
draggable: false,
icon: icon,
message: '<button type="button" ng-click="openProject(project)">' + value.ao + '</button> {{project.ao}}',
clickable: true
}
}
});
$scope.map.anotherList = anotherList;
});
}
Here in that message template i am adding a button with a function call, As i understood to pass a variable in template, Scope is the solution, but here, on all markers value.ao name is different but project.ao is same ...(why ????)
when i click on each marker its opening last project in array(anArray).
How can i bind scope value in each iteration ?,So i can open correct project on each marker

my working solution looks like:
$scope.goTo = function() {
restAPI.getSomething().success(function(data) {
var anArray = data.lists;
console.log(anArray);
var anotherList = {};
$scope.project = {};
angular.forEach(anArray, function(value, key) {
if (value.geolocation) {
$scope.project[key] = value;
anotherList[anArray[key].ao] = {
lat: value.lat,
lng: value.lng,
focus: false,
draggable: false,
icon: icon,
message: '<button type="button" ng-click="openProject('+key+')">' + value.ao + '</button> {{project.ao}}',
clickable: true
}
}
});
$scope.map.anotherList = anotherList;
});
}
$scope.openProject = function(key){
var project = $scope.project[key];
// this is how i got correct project
}
Thanks to Edwin for pointing out to pass key value.

AngularJs $scope variable doesn't change

I have such Andularjs code in my app:
angular.module('FlickrMaps', ['SignalR'])
.factory('PhotoMarkers', ['$rootScope', 'Hub', function ($rootScope, Hub) {
var PhotoMarkers = this;
//Hub setup
var hub = new Hub('photos', {
listeners: {
'addTotalPhotosCount': function (total) {
PhotoMarkers.totalCount = total;
$rootScope.$apply();
},
'initPhotoMarker': function (photo) {
var photolocation = new window.google.maps.LatLng(photo.Latitude, photo.Longitude);
var marker = new window.google.maps.Marker({
position: photolocation,
title: photo.Title,
photoThumb: photo.PhotoThumbScr,
photoOriginal: photo.PhotoOriginalScr
});
window.google.maps.event.addListener(marker, 'click', function () {
$rootScope.$broadcast('markerClicked', marker);
});
PhotoMarkers.all.push(marker);
$rootScope.$apply();
},
'photosProcessed': function () {
PhotoMarkers.processedPhotosCount++;
if (PhotoMarkers.processedPhotosCount == PhotoMarkers.totalCount && PhotoMarkers.processedPhotosCount > 0) {
$rootScope.$broadcast('markersLoaded');
}
$rootScope.$apply();
},
},
methods: ['loadRecentPhotos'],
errorHandler: function (error) {
console.error(error);
}
});
//Variables
PhotoMarkers.all = [];
PhotoMarkers.processedPhotosCount = 0;
PhotoMarkers.totalCount = 0;
//Methods
PhotoMarkers.load = function () {
hub.promise.done(function () { //very important!
hub.loadRecentPhotos();
});
};
return PhotoMarkers;
}])
.controller('MapController', ['$scope', 'PhotoMarkers', function ($scope, PhotoMarkers) {
$scope.markers = PhotoMarkers;
$scope.image = '123';
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
$scope.$on('markerClicked', function (event, data) {
console.log(data.photoThumb);
$scope.omfg = 'nkfglfghlfghflj';
});
$scope.$on('markersLoaded', function () {
$('#myModal').modal('toggle');
$scope.image = 'lol';
var mapOptions = {
zoom: 4,
center: new window.google.maps.LatLng(40.0000, -98.0000),
mapTypeId: window.google.maps.MapTypeId.TERRAIN
};
console.log(PhotoMarkers.all);
$scope.map = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var markerCluster = new MarkerClusterer($scope.map, $scope.markers.all);
});
}])
$broadcast and $on services work finem but when I try to change $scope.image variable on markerClicked event it doesn't change on view page, but for markersLoaded it changes. Does anyone have any ideas? I tried lot of ways to fix it...

You need to wrap it inside $apply since you are in a callback outside angular:
window.google.maps.event.addListener(marker, 'click', function () {
$rootScope.$apply(function() {
$rootScope.$broadcast('markerClicked', marker);
});
});

Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directive

I've got a directive in one of my templates, the following is the code of that directive:
appDirectives.directive('map', function() {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
alert("This fires just fine.");
function initialize() {
alert("This doesnt fire on Phonegap.");
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var mapOptions = {
center: $scope.currentLocation,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map($element[0], mapOptions);
var currentLocation = $scope.currentLocation;
$scope.onCreate({
map: map,
currentLocation: currentLocation
});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}, function (error) {
alert('Erro ao obter localização.');
});
}
google.maps.event.addDomListener(window, 'load', initialize());
}
}
When running the app on the browser, everything works as expected. But when running on the iOS Simulator, it just doesnt fire the function initialize().
I've tried this (as described here):
google.maps.event.addDomListener(window, 'load', initialize);
Bu then it just fails to work both in the browser and in the simualtor.
Any idea why?

You have to make sure that cordova is ready before getting the current location. here is an explanation from phonegap docs
http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#deviceready
edited:
here is how you can use deviceReady in angular way
in your api.js where you keep service
//cordova service
apiServices.factory('cordovaReady', function() {
return function (fn) {
var queue = [];
var impl = function () {
queue.push(Array.prototype.slice.call(arguments));
};
document.addEventListener('deviceready', function () {
queue.forEach(function (args) {
fn.apply(this, args);
});
impl = fn;
}, false);
return function () {
return impl.apply(this, arguments);
};
};
});
//map service
apiServices.factory('geolocation', function ($rootScope, cordovaReady) {
return {
getCurrentPosition: cordovaReady(function (onSuccess, onError, options) {
navigator.geolocation.getCurrentPosition(function () {
var that = this,
args = arguments;
if (onSuccess) {
$rootScope.$apply(function () {
onSuccess.apply(that, args);
});
}
}, function () {
var that = this,
args = arguments;
if (onError) {
$rootScope.$apply(function () {
onError.apply(that, args);
});
}
},
options);
})
};
});
Then inject geoLocation service in your controller
geolocation.getCurrentPosition(function (position) {
$scope.position = {
coords: {
latitude: position.coords.latitude,
longitude: position.coords.longitude
}
};
});