Menu
  • HOME
  • TAGS

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

angular-google-maps

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?

angular-google-maps

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

angularjs,angular-google-maps

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?

angularjs,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"...