Within this angular google map, I want to give the ability for a link to appear in a dynamic infowindow thats generated when the user searchs an address.
Now Ive got the infowindow to load correctly but the ng-click event is coming back undefined.
I have compiled the HTML string but still having no joy. Here is the compile code:
google.maps.event.addListener(this.marker, 'click', function () {
var contentString2 = "<div><a ng-click='hello()'>Click me!</a></div>";
var compiled = $compile(contentString2)($q);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
this.selectedMarker = this.marker;
infowindow.open(this.map, this.marker);
});
};
The infowindow loads fine when the marker is selected but when the "ng-click" is clicked inside the infowindow it comes back with:
Uncaught TypeError: undefined is not a function
I've provided a jsbin link to show the code:
http://jsbin.com/zukefa/edit
Thanks in advance for your help.
Related
In the Google Maps API I have set the various location in the Map and set out the Location with their unique address when I try to click on the location the address pop up box should have to be appear on the location place but now in my map when I click anywhere the pop up box shown up in the one place.
Make sure that you open your infoWindow on your marker's onClick listener like this:
var contentString = marker.getPosition().toString();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Here's a complete sample implementation using Maps JavaScript API that you can try: https://jsfiddle.net/smga08/anw2hfot/14/
I am able to pull data from firebase and show it in the browser console, but how do I actually display it as text on a webpage?
Here's the code I have now:
<script>
var ref = new Firebase("https://datatest-104.firebaseio.com");
ref.orderByChild("location").equalTo("United States").on("child_added", function(snapshot) {
console.log(snapshot.key());
});
//My code that I'm trying:
document.write(snapshot.key());
</script>
I am trying to use document.write(snapshot.key()); but am not sure how it works.
Put document.write(snapshot.key());into the function instead of out of it:
ref.orderByChild("location").equalTo("United States").on("child_added", function(snapshot) {
document.write(snapshot.key());
});
Then, the snapshotwill be defined, so it'll write onto the page.
Im trying to work with Angular.js and Mapbox.
The map is loaded, from Mapbox with no problem. But the Zoom Control have problems, in the browser it shows the Zoom Control, but it doesnt appear in the Android Emulator. In the browser and in the emualtor, they dont work: they cant zoom in or zoom out.
I draw another Zoom Control and it happen the same problem, both in the browser appear and both doesnt Zoom in or Zoom out. In the browser they show both zoom control and Android Emulator both Zoom Controller doesnt appear and they doesnt work.
I have try this work Mapbox with no problem outside Angular:
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Could some one could explain me or give me a hand.
thanks in advance
Here is the code that I was working:
.controller('loa', function($scope, $ionicModal) {
// MAPAS ------------------------------------------------------------>
$ionicModal.fromTemplateUrl('templates/calama.html', {
scope: $scope }).then(function(modal) {
$scope.modal1 = modal;
}, {
animation: 'slide-in-down',
focusFirstInput: true,
scope: $scope });
$scope.cierra1 = function() {
$scope.modal1.hide(); };
$scope.mapaCalama = function() {
$scope.modal1.show();
L.mapbox.accessToken = 'pk.xxxxxx';
var map = L.mapbox.map('map')
.setView([-22.4562, -68.9249], 6)
.addLayer(L.mapbox.tileLayer('itelius.xxxxx'));
L.mapbox.featureLayer('itelius.xxxxxx').on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) { clusterGroup.addLayer(layer); });
map.addLayer(clusterGroup);
}); };
I recentley put a zoom-slider object and works, but when I add a zoom control and try it I cant zoom in or zoom out.
I am trying to get info from the ng-click element. When I log $event from clicked element I get the right info but when I click the child element of then I get the info about the child and not the parent where the ng-click is set. Here is the fiddle link
http://jsfiddle.net/g3x2ndyc/5/.
var app = angular.module('app',[])
app.controller('appCtr', function($scope) {
$scope.testThis = function(evt){
//evt.stopPropagation();
// evt.preventDefault();
console.log(evt.srcElement.offsetLeft)
console.log(evt.srcElement.offsetWidth)
console.log('____________________________')
}
});
use evt.currentTarget not evt.srcElement (that one is mainly for IE).
Look at fiddle http://jsfiddle.net/g3x2ndyc/11/
var app = angular.module('app',[])
app.controller('appCtr', function($scope) {
$scope.testThis = function(evt){
console.log(evt.currentTarget.offsetLeft)
console.log(evt.currentTarget.offsetWidth)
console.log('____________________________')
}
});
Hard to tell exactly what you are ultimately trying to do, but you can just pass the id in to the click event then grab the position based on that.
ng-click="myevent('idName')
myevent(id) {
jquery('#'+id).position();
}
I am trying to write a directive to fill a leaflet marker pop-up. I have been banging my head against the wall trying to figure out what I am doing wrong. My pop-up is always empty.
Any one successfully done this before?
Here is a plunker showing the problem:
http://plnkr.co/edit/53bebb?p=preview
marker.bindPopup(e[0]); instead of marker.bindPopup(clonedElement[0]);
Try this:
var directiveTag = $(document.createElement("search-results-map-marker-popup"));
var compiledDirective = $compile(directiveTag)(popupScope);
newMarker.bindPopup(compiledDirective[0]);
You can use the new support for Angular content in angular-leaflet-directive:
var html = '<br><span ng-class="thumbsUpClass(item)" ' +
'ng-click="addChoice(item,set)"><span class="popup-container"><span ' +
'class="icon-stack thumbs-up-stack"><i class="icon-sign-blank ' +
'icon-stack-base"></i><i class="icon-thumbs-up"></i></span></span></span>';
...
$scope.markers.push( { lat: ...,
lng: ...,
message: html,
getMessageScope: function() { return $scope; },
});