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);
}
}])
Related
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.
I want to show Google map in my html . here is my code:
html:
<div class="map-content">
<div map-marker="" ng-model="searchLocation" class="mapmarker"></div>
</div>
js:
app.directive('mapMarker',function(){
return {
restrict: 'EA',
require: '?ngModel',
scope:{
searchLocation: '=ngModel'
},
controller: function ($scope) {
$scope.searchLocation = {
latitude: 48.137273,
longitude: 11.575251
};
},
resolve: {
load: function () {
}
},
link: function(scope , element, attrs , ngModel){
var mapOptions;
var googleMap;
var searchMarker;
var searchLatLng;
ngModel.$render = function(){
searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
mapOptions = {
center: searchLatLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googleMap = new google.maps.Map(element[0],mapOptions);
searchMarker = new google.maps.Marker({
position: searchLatLng,
map: googleMap,
draggable: true
});
google.maps.event.addListener(searchMarker, 'dragend', function(){
scope.$apply(function(){
scope.searchLocation.latitude = searchMarker.getPosition().lat();
scope.searchLocation.longitude = searchMarker.getPosition().lng();
});
}.bind(this));
};
scope.$watch('searchMarker', function(value){
var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
searchMarker.setPosition(myPosition);
}, true);
}
}
});
Also, I include
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
It knows script file but it can't show map on my html. Any suggestion?
With a little bit of modifications your example works: see my plunkr.
angular
.module('app', [])
.directive('mapMarker',function(){
return {
restrict: 'EA',
scope:{
searchLocation: '=mapMarker'
},
controller: function ($scope) {
$scope.searchLocation = {
latitude: 48.137273,
longitude: 11.575251
};
},
link: function(scope , element, attrs , ngModel){
var mapOptions;
var googleMap;
var searchMarker;
var searchLatLng;
searchLatLng = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
mapOptions = {
center: searchLatLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googleMap = new google.maps.Map(element[0], mapOptions);
searchMarker = new google.maps.Marker({
position: searchLatLng,
map: googleMap,
draggable: true
});
google.maps.event.addListener(searchMarker, 'dragend', function(){
scope.$apply(function(){
scope.searchLocation.latitude = searchMarker.getPosition().lat();
scope.searchLocation.longitude = searchMarker.getPosition().lng();
});
});
scope.$watch('searchMarker', function(value){
var myPosition = new google.maps.LatLng(scope.searchLocation.latitude, scope.searchLocation.longitude);
searchMarker.setPosition(myPosition);
}, true);
}
}
});
You don't need ngModel. Especially ngModel.$render. It is needed for inputs, which is not your case.
Container for map has to have initial size: width and height.
I am trying to display a pop up window in an angular leaflet map using prune cluster. However, I am getting an error that leafletView is an unknown provider. I have followed the examples on this page but i have been unsuccessful - https://github.com/SINTEF-9012/PruneCluster. Here is my code:
angular.module('bizvizmap').controller('controller', [
'$scope', '$http', '$filter', 'leafletData', 'leafletView',
function ($scope, $http, $filter, leafletData, leafletView){
$scope.center = {
lat: 39.5500507,
lng: -105.7820674,
zoom: 4
},
$scope.defaults = {
scrollWheelZoom: true
},
$scope.events = {
map: {
enable: ['zoomstart', 'drag', 'click', 'mousemove'],
logic: 'emit'
}
},
$scope.layers = {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
markers:{}
},
$scope.map = null;
leafletData.getMap("bizvizmap").then(function(map){
$scope.map = map;
});
function renderMarkers(data, map){
var markerLayer = new PruneClusterForLeaflet();
for (var i=0; i < data.length; i++){
var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
popup: "Marker";
markerLayer.RegisterMarker(marker);
}
map.addLayer(markerLayer);
markerLayer.ProcessView();
}
//Display PopUp
leafletView.PrepareLeafletMarker = function (marker, data) {
if (marker.getPopup()) {
marker.setPopupContent(data.company);
} else {
marker.bindPopup(data.company);
}
};
$scope.geojson = {};
$http.get('data/bizvizmap.geojson').success(function (data){
$scope.data = data;
// Render clustered markers
renderMarkers(data.features, $scope.map);
});
// Filtering markers
$scope.search = {
'NAICS':'',
'SIC':''
};
$scope.$watch('search', function(newVal, oldVal){
if(!angular.equals(newVal, oldVal)) {
var geojson = angular.copy($scope.data);
angular.forEach(newVal, function(value, property){
console.log(property + ':' + value);
if (value !== ''){
geojson = $filter('filter')(geojson, property, value);
}
});
function removeMarkers(data, map){
map.removeLayer(markerLayer);
markerLayer.ProcessView();
}
//map.removeLayer(markerLayer);
// Remove all the markers
$scope.geojson.data = geojson;
//renderMarkers(data.features, $scope.map);
} else {
$scope.geojson.data = $scope.data;
}
}, true);
}
]);
I think that the object that have to be modified in order to add popups is the actual prunecluster were you are registering the markers.
var markerLayer = new PruneClusterForLeaflet();
markerLayer.PrepareLeafletMarker = function (marker, data) {
if (marker.getPopup()) {
marker.setPopupContent(data.company);
} else {
marker.bindPopup(data.company);
}
};
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);
});
});
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
}
};
});