I'm using angularjs UI-map, I loop the data from firebase.
So far so good, but when I click on the markers and it always display the last query data.
here is snipper code
In html
<!-- Setup Marker -->
<div ng-repeat="marker in markers"
ui-map-marker="markers[$index]"
ui-event="{'map-click': 'showMarkerInfo(marker)'}">
</div>
<!-- Setup Marker Info Window -->
<div ui-map-info-window="infoWindow">
<div>Marker - <input ng-model="full_name"></div>
<div>Message</div>
</div>
In JS
firebaseAuth.firebaseRef.child('/human/').on('child_added', function(snapshot) {
$scope.users = snapshot.val();
$scope.latLng = new google.maps.LatLng($scope.users.lat, $scope.users.lng);
$scope.markers.push(new google.maps.Marker({
map: $scope.map,
position: $scope.latLng
}));
});
$scope.showMarkerInfo = function(marker) {
$scope.currentMarkerLat = $scope.users.full_name;
$scope.infoWindow.open($scope.map, marker);
console.log(marker);
};
I haven't tried angular-ui, but this problem looks the same as the "Javascript infamous Loop problem", so you might want to try:
ui-event="{'map-click': 'showMarkerInfo(markers[$index])'}"
However, I guess it will suffer the same problem, but it's worth a try.
Related
I have a tough problem to fix, spent some hours and still stucked so I need your help now.
I'm developing an application for exchange students using cordova and Ripple emulator. I simply want to display a map with Google Maps API.
But I have always a grey background event if the styles buttons and google footer are loaded and displayed as shown below :
Image of my Grey problem
When I first load my page I have really quickly an image of australia (and then uluru which correspond to the code following) but then the google frame is loaded and grey screen take place again.
To prevent to get this solution, yes I allow every links in my Content Security Policy.
Image of my Content Security Policy
Here is the code of my html page for the map (i use angularJS) :
<section class="panel" ng-controller="MapController">
</head>
<body>
<div class="panelFilters"></div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCirwIL6S55w7cmDLhxo3exIsjn9DwPVtc&callback=initMap">
</script>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
map.refresh();
}
</script>
</body>
</section>
And then here the code of my MapController that I call in my html page :
function MapController($scope){
var isOpen = false;
var map = document.getElementById('map');
$(".header").click(function(){
if(!isOpen){
$('.header').empty().append("Search filters");
isOpen = true;
}else{
$('.header').empty().append("||");
isOpen = false;
}
$(".panelFilters").slideToggle();
})
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
console.log("resized");
});
google.maps.event.trigger(map, 'resize');
}
I absolutely don't know if the problem is related to my code, to ripple or to cordova. Every tip and help is welcome.
Thanks.
Have been trying to get a button to work on in a small app that I have been building using the Ionic Framework.
The button has a pretty simple job right now, on click show directions on the map. When the function is called within the controller it shows on the map but when I try to call it from the click, I am not able to get the directions showing.
Wondering what the issue could be here.
var directionsDisplay = new google.maps.DirectionsRenderer({
map: $scope.map
});
$scope.show_dirs = function(){
var request = {
destination: locations[3],
origin: temp_center,
travelMode: google.maps.TravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the route on the map.
directionsDisplay.setDirections(response);
}
});
};
//show function works
//$scope.show_dirs();
The HTML button:
<div style= "position: absolute; bottom: -10px; width: 100%" ng-controller="MapCtrl">
<button class="button button-block button-balanced" ng-click = "show_dirs">Find Parking Near Me</button>
</div>
Your ng-click attribute is incorrect. It should be an Angular expression to evaluate and execute when the button is clicked.
What you have, show_dirs, will evaluate to the function itself. What you want instead is to actually call that function.
So it should be ng-click="show_dirs()".
I'm new to Angular (so probably am making some silly mistakes) and I'm trying to add some markers to a map instance with a custom image icon.
I understand that the best way to do this is to add this into the items as suggested by Fedaykin but is there a way to do this if you can't change the JSON file?
I was able to add the custom icon for a single marker, so I wondered if I could do the same for several markers using 'forEach', but although this shows all my markers it doesn't add the icon.
$scope.marker = Mapdata.query(function() {
var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";
$scope.$watch('data', function(data) {
angular.forEach($scope.marker, function(markerList, id, coords, icon) {
$scope.markerList = [{
id: data.id,
coords: {
latitude: data.latitude,
longitude: data.longitude
},
icon: image
}];
});
});
});
The html is just the usual angular-google-maps stuff
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>
I have a plunker here to put it all in context.
Thanks for any help or advice :)
Made a few changes:
index.html
icon="markerList.icon" --> icon="'icon'"
script.js
I didn't quite understand what you were trying to to with the $watch - I ended up just setting the image attribute of each marker when the data is initially fetched.
Mapdata.query(function() { --> Mapdata.query(function(data) {
$scope.$watch thing -->
angular.forEach(data.boards, function(board) {
board.icon = image;
});
Here's the updated plunker.
Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive
I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/
jsfiddle
For simplicity, I'm declaring the markers manually (and they're displaying correctly):
$scope.markers = [
{
id: 0,
coords: {
latitude: 37.7749295,
longitude: -122.4194155
},
data: 'restaurant'
},
{
id: 1,
coords: {
latitude: 37.79,
longitude: -122.42
},
data: 'house'
},
{
id: 2,
coords: {
latitude: 37.77,
longitude: -122.41
},
data: 'hotel'
}
];
The html looks like:
<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
<ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</body>
I'm applying the onClick function to the markers array using this code
$scope.addMarkerClickFunction = function(markersArray){
angular.forEach(markersArray, function(value, key) {
value.onClick = function(){
$scope.onClick(value.data);
};
});
};
The marker click functions look like
$scope.windowOptions = {
show: false
};
$scope.onClick = function(data) {
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('This is a ' + data);
};
$scope.closeClick = function() {
$scope.windowOptions.show = false;
};
The $scope.onClick() function seems to be working on marker click since the console outputs what is expected - and the $scope.windowOptions.show value toggles between true and false...
I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.
P.S. The API documentation examples seem out of date since they don't use show in the example but rather options.visible to show and hide infowindows - but then all the issues / examples suggest using show instead ?
I know this is an old post.
However, these days I've been struggling myself trying to do this and, moreover, the jsfiddle of the accepted answer is broken and doesn't work with latest versions of angular-google-maps directive. So, I've decided to share a working plunker hoping it can help other people.
Plunker here
This version is rendering multiple markers but just one window. Only one window can be opened at the same time.
It's based on the advises of the official site FAQ Section: See How do I only open one window at a time?
html
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
options="map.window.options"
closeClick="map.window.closeClick()"
templateUrl="'infowindow.tpl.html'"
templateParameter="map.window">
</ui-gmap-window>
<ui-gmap-markers
models="map.markers"
coords="'self'"
events="map.markersEvents"
options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
js
$scope.map = {
center: {
latitude: 39.5925511,
longitude: 2.633202
},
zoom: 14,
markers: [], // Markers here
markersEvents: {
click: function(marker, eventName, model) {
$scope.map.window.model = model;
$scope.map.window.show = true;
}
},
window: {
marker: {},
show: false,
closeClick: function() {
this.show = false;
},
options: {}
}
};
Hope it helps.
Your marker's binding is incorrect in the window directive.
Basically, you need to set a marker as selected on click and bind the window to that selected marker. See the jsfiddle for a working example.
<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
http://jsfiddle.net/gqkmyjos/
I know this is old post, but I struggled with Angular Google Map, and solve issue when you open one window for markers. If you use ng-repeat and window for each one - no problems. But when you have a markers directive, and want to show only one window, then you have an issue - window places not above marker and you need change position a little. How to do it? Let me share my experience on that.
You just need to specify pixelOffset for windowoptions like that:
JS:
$scope.windowOptions = {
pixelOffset : {
height: -25,
width: 0
}
};
HTML:
<ui-gmap-window coords='selectedmarker.coords' show='true' options='windowOptions'>
#{{ selectedmarker.tagline }}
</ui-gmap-window>
That's it. Change height for your needs.
you're better setting the marker model on the scope on click something like this:
marker click callback:
$scope.onClick = function(marker) {
$scope.selectedMarker = marker.model;
}
Then use the selectedMarker in the directive:
<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
simple. assumes your marker model has longitude and latitude set of cause
I'm hiding the map initially with an ng-hide. When the ng-hide-expression evaluates to true, the map is not shown correctly. It is only partially shown and behaviour is also strange on dragging.
When I remove the ng-show attribute the map is shown correctly.
HTML:
<div ng-controller="MapCtrl">
<button ng-click="showMap()">Show map</button>
<div ng-show="showMapVar">
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{}">
</div>
<div id="map_canvas" ui-map="myMap" style="height:200px;width:300px"
ui-event="{}" ui-options="mapOptions">
</div>
</div>
</div>
Javascript:
angular.module('doc.ui-map', ['ui.map'])
.controller('MapCtrl', ['$scope', function ($scope) {
$scope.myMarkers = [];
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
$scope.showMapVar = true;
}
}]) ;
Using ng-show merely sets the display property to none when the object is not supposed to be visible. This is messing with the height/width calculations.
On the other hand, ng-if (Angular 1.2) removes and re-creates the DOM, forcing a recomputation of the height/width. That should fix the problem.
I have my google map in a hidden tab,this solution worked for me,
assuming you have your map initialized and referenced with $scope.map :
<div id="googleMap" style="height:600px;" ng-show="resizeMap()"></div>
in your controller :
$scope.resizeMap = function(){
google.maps.event.trigger($scope.map, 'resize');
$scope.map.setCenter(0);
}
https://github.com/allenhwkim/angularjs-google-maps/issues/15 says
This happens because the map is initialized in hidden status. so the map has the size of its minimum width and height although the container is bigger
http://plnkr.co/edit/zLl2pJEnLzcq1rm07hLq?p=preview
As you see on the plunkr, when the map is initialized on visible DOM, it has the proper size.
That's the difference.
If you want to hide the map at the initial status, I would recommend to redraw the map after it's shown. This may help, How do I force redraw with Google Maps API v3.0?
That solved it for me