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 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> ...
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...
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.
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...
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)...
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"...
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-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-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()...
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...
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,...
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.
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...
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',...