I have a listener for a right-click context menu that allows me to perform actions specific to that particular infowindow. For instance, here is my code that opens and fills a directions panel:
google.maps.event.addListener(contextMenu, 'menu_item_selected', function(latLng, eventName){
switch(eventName){
case 'directions_from_click':
showDirections();
geocoder.geocode({latLng: latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
fAddress = results[0].formatted_address;
$('#start').val(fAddress);
$('#panelWrapper').focus();
}
}
});
$('#panelWrapper').focus();
break;
case 'directions_to_click':
showDirections();
geocoder.geocode({latLng: latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
fAddress = results[0].formatted_address;
$('#end').val(fAddress);
$('#panelWrapper').focus();
}
}
});
$('#panelWrapper').focus();
break;
}
});
In addition to the right-click context menu, I'd also like to have a link in the infowindow that performs the same action onclick:
<a class="fromLink">Directions from here</a>
How do I add a listener for this link to perform something similar to my context menu? I've been experimenting with the addDomListener function, but I'm not sure if that's exactly what I need.
I couldn't find anything in the API, so I just ended up passing in LatLng via an onclick event into a function to fill in the direction input. Rather ugly, but sort of like this:
function addMessageMarker(marker, addlInfo){
var position = String(marker.getPosition());
var fromLink = '<a class="infoLink" onClick="getFrom("' + position + '")">Directions from here</a> - ';
... //bunch of other stuff
}
function getFrom(position) {
showDirections();
//Convert the string value into a latLng
var latLng = position.replace("(","");
latLng = latLng.replace(")","");
latLng = latLng.replace(" ","");
latLngArr = latLng.split(",");
lat = parseFloat(latLngArr[0]);
lng = parseFloat(latLngArr[1]);
latLng = new google.maps.LatLng(lat,lng);
geocoder.geocode({latLng: latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
fAddress = results[0].formatted_address;
$('#start').val(fAddress);
}
}
});
$('#panelWrapper').focus();
}
Related
I am trying to implement a mechanism where specific items on a screen are navigable using arrows keys.
At the moment, I am drawing a red box around items as they move and pressing enter activates them.
I have the following directive:
(credits here and here)
.directive("moveNext", function() {
return {
restrict: "A",
link: function($scope, element,attrs) {
element.bind("keyup", function(e) {
if (e.which == 37) {
console.log ("MOVE LEFT:" + JSON.stringify(element));
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(\d+)/);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);
console.log ("Looking for move-"+(currentId-1));
var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId - 1)));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 39) {
console.log ("MOVE RIGHT:" + JSON.stringify(element));
element[0].classList.remove('selected');
var partsId = attrs.id.match(/move-(\d+)/);
var currentId = parseInt(partsId[1]);
console.log ("CURRENT PARTS="+JSON.stringify(partsId));
var currentId = parseInt(partsId[1]);
var nextElement = angular.element(document.querySelectorAll('#move-' + (currentId + 1)));
console.log ("Looking for move-"+(currentId+1));
// var $nextElement = element.next().find('movehere');
if(nextElement.length) {
nextElement[0].classList.add('selected');
nextElement[0].focus();
// $nextElement[0].style.border='5px solid red';;
}
}
if (e.which == 13) {
console.log ("ENTER:" + JSON.stringify(element));
// element.triggerHandler('click');
}
});
if (event) event.preventDefault();
}
}
})
And then in the template I have the following, for example:
<div>
<button move-next id="move-1" ng-click="d1()">Yes</button>
<button move-next id="move-3" ng-click="d1()">Yes</button>
<button ng-click="d1()">No</button>
<button move-next id="move-2" ng-click="d1()">Yes</button>
</div>
Yes <!-- PROBLEM -->
Yes <!-- NEVER COMES HERE -->
The nice part is I can now navigate to any "clickable" element depending on the ID order I set, which is my intention. The problem is that focus() only works on items that are focusable, so once "move-4" is highlighted by the directive, the focus() doesn't really work so I can never move "next" to "move-5"
thanks
Problem solved:
I removed the directive, and instead wrote a global keyUpHandler
Inside the keyup handler, I kept state on last selected item ID, so I could +- it irrespective of whether an item is focusable or not.
I can now navigate arbitrary items on any view with direction pad.
The problem however is that move-Ids must be unique across views or I need to find a way to do a query only on the active view. I need to figure out how to do that. currentView = document.querySelector('ion-view[nav-view="active"]'); doesn't work.
The code (needs cleanup, but seems to work)
window.addEventListener('keyup', keyUpHandler, true);
function keyUpHandler(evt){
$timeout (function() {
var currentView = document.querySelector('ion-view[nav-view="active"]');
var keyCode=evt.keyCode;
var el, nextel;
if (keyCode == 13 ) {
if ($rootScope.dpadId >0) {
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
el.triggerHandler('click');
}
return;
}
if (keyCode == 37 || keyCode == 39) {
if ($rootScope.dpadId < 1) {
console.log ("First dpad usage");
$rootScope.dpadId = 1;
el = angular.element(currentView.querySelector('#move-1'));
if (el.length) {
el[0].classList.add('selected');
}
} else {
// unselect old
el = angular.element(currentView.querySelector('#move-' +$rootScope.dpadId));
var nextId = (keyCode == 37) ? $rootScope.dpadId -1: $rootScope.dpadId + 1;
nextel = angular.element(currentView.querySelector('#move-' +nextId));
if (nextel.length) {
el[0].classList.remove('selected');
nextel[0].classList.add('selected');
$rootScope.dpadId = nextId;
}
console.log ("dpadID="+$rootScope.dpadId);
}
}
});
}
I have used to get current address using google api and now i want implement callback function in this function using angular 4 how can implement it?
let currgeocoder = new google.maps.Geocoder();
currgeocoder.geocode({
'location': location
}, function(results:any, status:any) {
if (status == google.maps.GeocoderStatus.OK) {
let place = results[0];
//this.showresult(place.formatted_address);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
this.myGroup.setValue({
searchControl: 'global'
});
you can create oberservable and push new values on it ,
let subject = new Subject();
let ovservable = subject.asObservable()
subject.next("b");
ovservable.subscribe((value) => {
console.log("Subscription got", value); // Subscription wont get
// anything at this point
});
so create observable , expose it and when you receive data from call make use of .next() method that will do
in your code
let subject = new Subject();
let ovservable = subject.asObservable();
let currgeocoder = new google.maps.Geocoder();
currgeocoder.geocode({
'location': location
}, function(results:any, status:any) {
if (status == google.maps.GeocoderStatus.OK) {
let place = results[0];
subject.next(place);
//this.showresult(place.formatted_address);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
this.myGroup.setValue({
searchControl: 'global'
});
ovservable.subscribe((value) => {
console.log("Subscription got", value); // Subscription wont get
// anything at this point
});
I am using AngularJS local storage. I am facing an issue with local storage. At first when page is loaded the localstorage is assigning with null value. If I refresh at second time localstorage value is setting fine. I don't know what the issue.
My code is.
var app = angular.module('EntityApp', ['ngRoute', 'slickCarousel']);
app.controller('EntityAppCntroller', function($scope, $http, $window) {
if (localStorage.getItem('IsNewPinSet') != 1) {
var getLocation = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
};
getLocation();
function showPosition(position) {
var latitude;
var longitude;
latitude = position.coords.latitude;
longitude = position.coords.longitude;
localStorage.setItem('latitudeHome', latitude)
localStorage.setItem('longitudeHome', longitude)
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
geocoder.geocode({
'latLng': latlng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
for (var i = 0; i < results[0].address_components.length; i++) {
var types = results[0].address_components[i].types;
for (var typeIdx = 0; typeIdx < types.length; typeIdx++) {
if (types[typeIdx] == 'postal_code') {
var pin_all = results[0].address_components[i].short_name;
localStorage.setItem('pincodehome', pin_all)
$scope.pin_all = pin_all;
}
}
}
} else {
console.log("No results found");
}
}
});
};
}
// $window.localStorage.getItem('pincodehome') is null
// $window.localStorage.getItem('latitudeHome') is null
// $window.localStorage.getItem('longitudeHome') is null
//Common response in home page
$http.get('someurl?pincode=' + localStorage.getItem('pincodehome') + '&lat=' + localStorage.getItem('latitudeHome') + '&lang=' + localStorage.getItem('longitudeHome'), {}).success(function(response) {
$scope.Promotion = response.Promotion.Response;
});
});
Getting into Angular. I'm trying to set up a factory to store animation functions. Only thing I get is 'service is not defined' in the console. Here's a codepen link: http://codepen.io/tplummerptc/pen/dGbKOp
var app = angular.module('App', []);
app.factory('soarimation', function(){
service.soarFlash = function(target, color) {
target = (target == undefined) ? false : target;
color = (color != 'default') ? 'defualt' : color;
// Set animation color
if(color != 'default') {
var aniClass = 'flash-'+color;
} else {
var aniClass = 'flash';
}
if(!target) {
$(this)
.closest(target)
.addClass(aniClass)
.delay(1000)
.queue(function(next){
$(this).removeClass(aniClass);
next();
});
} else {
$(this)
.addClass(aniClass)
.delay(1000)
.queue(function(next){
$(this).removeClass(aniClass);
next();
});
}
}
});
app.controller('addRow',function($scope, soarimation){
$scope.submitRow = function(event){
angular.element(event.currentTarget).soarFlash('li');
}
});
Factories in angularjs always return a object. You have to declare the service object inside app.factory method and then add the desired functions and variables to it. Finally return that object. You can use this object in your controller by using the factory name.
app.factory('soarimation', function(){
var service = {}; //Declaring the object
service.soarFlash = function(target, color) {
target = (target == undefined) ? false : target;
color = (color != 'default') ? 'defualt' : color;
// Set animation color
if(color != 'default') {
var aniClass = 'flash-'+color;
} else {
var aniClass = 'flash';
}
if(!target) {
$(this)
.closest(target)
.addClass(aniClass)
.delay(1000)
.queue(function(next){
$(this).removeClass(aniClass);
next();
});
} else {
$(this)
.addClass(aniClass)
.delay(1000)
.queue(function(next){
$(this).removeClass(aniClass);
next();
});
}
}
return service; // Return the object
});
app.controller('addRow',function($scope, soarimation){
$scope.submitRow = function(event){
var elem = angular.element(event.currentTarget);
soarimation.soarFlash(elem);
}
});
I don't know why the marker and zoom is not working and here is the code:
function initialize() {
if (document.getElementById("themap") != null) {
$.post("http://localhost/projects/php/invoice/getmapinfo.php", {
postalcode: $("#postalcode").html()
},
function(data, status) {
if (data == "-1" || data == "-2" || data == "-3") {
} else {
var apos = data.split(',');
var myCenter = new google.maps.LatLng(parseFloat(apos[0]), parseFloat(apos[1]));
var mapProp = {
center:myCenter,
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("themap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
}
);
}
}
$(document).ready(
function() {
$(document).ajaxStop(
function(){
initialize();
}
);
The map will show up but its is static. Do I need to get a key or not because it is run on my internal web server for me only or am I missing a step.
Thanks if you can help.