angularjs google maps - markers with window - infowindow not showing
angularjs,infowindow,marker,angular-google-maps
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"...
Angular google.maps.event.addListener('place_changed', function() {}); not working
angularjs,google-maps,addeventlistener,eventtrigger,angular-google-maps
Thanks KayAnn I have solved the issue. Actually I never checked in the function (searchBox) {} searchBox it's object which were proving all the data I required so here is updated code that is working perfectly var events = { places_changed: function (searchBox) { var lat = searchBox.getPlaces()[0].geometry.location.k; var lgn...
Angular Google Maps Markers - Different property name for longitude and latitude
angularjs,google-maps-api-3,angular-google-maps
This is not possible. The ui-gmap looks specifically for latitude and longitude.
Can't click on KML Layer inside a polygon
javascript,angularjs,google-maps,google-maps-api-3,angular-google-maps
You've forgotten to set the clickable-param for the directive(the demo also didn't set the clickable-property): <ui-gmap-polygon clickable="p.clickable" > 'use strict'; angular.module("map", ['uiGmapgoogle-maps']) .controller("MapController", ['$scope', '$http', function($scope, $http) { $scope.map = { center: { latitude: 48.80913908755741, longitude: 3.0915678394317014 }, zoom: 12, bounds: {} }; $scope.polygons = [{ id: 1, clickable: false,...
Add custom marker icon to angular-google-maps when markers are from external JSON
angularjs,icons,markers,angular-google-maps
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)...
Using a ui-router resolve to wait for a google map to load
angular-ui-router,angular-promise,angular-google-maps
The controller that was waiting on the resolve was also the controller that establishes the scope variables needed by angular-google-maps to draw the map. That caused this: resolve cause the controller to not get called --> map never gets drawn because it is waiting on the controller to set some...
angular-google-map angular set radius with range slider
javascript,angularjs,google-maps,angular-google-maps
Finally, I found what's going on. My problem was that the change of sliderValue does not affect the scope. So I remove the on-handle-up in my html on my directive range-slider and add a $watch See Using scope.$watch and scope.$apply for more information. So here's my code: $scope.sliderChange = function()...
How to ensure that the map is loaded
You can use the uiGmapIsReady within your controller - see IsReady in docs. uiGmapIsReady returns: - a promise once the map is loaded and ready - an array of map info (which i've called map_instances) -- the array length depends on how many maps you have loaded in your page...
Why is ng-non-bindable required for element in Angular Google Maps?
angularjs,google-maps,angular-google-maps
Basically this boils down to ui-gmap doing manual compilation of the template. In standard angular if you have something like: <directive> <some-html>{{someBinding}}</some-html> <directive> That usually means that "directive" is transcluding the content, and therefore "someBinding" is bound to the scope in which "directive" instantiated, not the "directive" innerScope. However, in...
Using angular-google-maps directive works during “grunt serve” but not during default grunt task
javascript,angularjs,angular-google-maps
I managed to fix this. The error was occurring during Karma tests because it wasn't finding the Google Maps API, nor the angular-google-maps sources. So I updated karma.conf.js to pull in the Google Maps API and angular-google-maps sources from bower_components. files: [ 'http://maps.googleapis.com/maps/api/js?sensor=false', 'app/bower_components/angular/angular.js', 'app/bower_components/angular-mocks/angular-mocks.js', 'app/bower_components/angular-resource/angular-resource.js', 'app/bower_components/angular-cookies/angular-cookies.js',...
How to edit a circle in angular-google-maps propably?
Thanks to the issues section on theire github page I found a "solution". It works only until version 2.0.12 (http://rawgit.com/angular-ui/angular-google-maps/2.0.12/dist/angular-google-maps.js) after this version this functionality is broken.
Angular google maps custom İcon only works when marker is updated
javascript,angularjs,google-maps,google-maps-api-3,angular-google-maps
Couple things I could think of: Try hard coding the icon url and see if that works. Then try to split marker declaration, so: var marker; var markerOptions = { id: markerId, latitude: latitude, longitude: longitude, icon: { url: icon, scaledSize: markerIconSize } }; marker = new google.maps.Marker(markerOptions); $scope.markers.push(marker); $scope.markerArray...
angular-google-maps not showing infowindow on mouseover event
angularjs,google-maps,google-maps-api-3,angular-google-maps
You must set model.showWindow instead of marker.showWindow
Angular-google-maps search-box
Is necessary include libraries=places <script src='//maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=pt&v=3.17'></script> ...
How to put two maps on the same page, with one marker in each map with angular google maps?
Use as a work around. I believe there is a issue with binding as it would only reference the first instance of the map in the DOM when using . Working example: http://plnkr.co/edit/DzPosZ85cMjs7hretr66?p=preview <div class="map_canvas" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" > <ui-gmap-markers models='markers' coords="'coords'" options="marker.options" idkey="marker.id"> </ui-gmap-markers> </ui-gmap-google-map> <ui-gmap-google-map center="map2.center"...