angular-google-maps

angular-google-maps updating marker model

随声附和 提交于 2019-12-06 12:51:13
问题 Im using the angular-google-maps library but I cannot seem to get the map to update when I dynamically add new markers to my model. Hardcoded markers in the model are correctly displayed. HTML <ui-gmap-markers models="map.placeMarkers" coords="'self'" icon="'icon'" options="'options'" click="'onClicked'" modelsbyref="true"></ui-gmap-markers> JS $scope.map.placeMarkers = [ { id: 1, latitude: 45, longitude: -74, options: {}, title: 'Test 123' }, { id: 2, latitude: 15, longitude: 30, options: {}

angular-google-maps markers not showing up

Deadly 提交于 2019-12-06 08:42:51
问题 So I am using the angular-google-maps directive from http://angular-ui.github.io/angular-google-maps/#!/api and I am unable to see my markers on my map instance. I have tried just about everything and am desperate for advice. I have tried moving the $scope.markers to my $scope.map object, tried moving it inside my $watch function, and adding the values directly into the html with no luck. I am thinking this has something to do with the $scope.control.refresh() function i had to add in order

Google Maps Places Autocomplete - Uncaught TypeError: Cannot read property 'getPlace' of undefined

北城余情 提交于 2019-12-06 04:48:05
setAutocomplete() { this.originPlaceId = null; this.destinationPlaceId = null; this.travelMode = google.maps.TravelMode.WALKING; this.directionsDisplay.setMap(this.map); this.setMapControls(this.map); this.setupClickListener('changemode-walking', google.maps.TravelMode.WALKING); this.setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT); this.setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING); console.log(this.originInput); this.originAutocomplete = new google.maps.places.Autocomplete(this.originInput); this.originAutocomplete.bindTo('bounds', this.map)

Change angular-google-maps language dynamically

孤人 提交于 2019-12-05 21:44:26
Is it possible to change map language dynamically when language is changed ? Or at least have the language map changed the next time I access it (after language is changed). I can set default language on map loading using this code (in mymap.module.ts) : @NgModule({ imports: [ AgmCoreModule.forRoot({ apiKey: 'MY_KEY', language: 'es', }), ] }) And I can get the current language using this.translate.currentLang (in mymap.component.ts). But I don't know how I can combine both. In order to change map's language, a bunch of localized JS scripts need to be refetched anew. So, you can just try to

For angular google maps how do I remove the polyline?

帅比萌擦擦* 提交于 2019-12-05 06:07:26
For angular google maps how do I remove the polyline? I'm using angular version 1 with JavaScript in a directive using a templateUrl. Version: angular-google-maps 2.1.5 This is my current HTML: <ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true"> <ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="false" visible="polygonConfig.visible" editable="true" draggable="true" clickable="true" events="polygonConfig.events"> </ui-gmap-polygon> <ui

How to get paths of agm polygon when it is edited and dragged?

有些话、适合烂在心里 提交于 2019-12-04 23:11:11
I am trying to get the updated polygon paths when the polygon is edited and dragged. I tried to do it like the code below. In my Typescript: @ViewChild(AgmPolygon) polygon: any; this.polygon.getPaths().then((x: any[]) => { x.forEach(y => { console.log('-'); y.forEach(z => console.log(z.lat(), z.lng())); }); }); I followed the following links also 1st link 2nd link . In my html: <agm-map [latitude]="lat" [fullscreenControl]="true" (mapClick)="mapClicked($event)" [longitude]="lng" [zoom]="8" [mapTypeControl]="true"> <agm-polygon [fillColor]="item.fillColor" (polyMouseOut)="polyMouseOut($event)"

angular-google-maps updating marker model

泪湿孤枕 提交于 2019-12-04 19:23:47
Im using the angular-google-maps library but I cannot seem to get the map to update when I dynamically add new markers to my model. Hardcoded markers in the model are correctly displayed. HTML <ui-gmap-markers models="map.placeMarkers" coords="'self'" icon="'icon'" options="'options'" click="'onClicked'" modelsbyref="true"></ui-gmap-markers> JS $scope.map.placeMarkers = [ { id: 1, latitude: 45, longitude: -74, options: {}, title: 'Test 123' }, { id: 2, latitude: 15, longitude: 30, options: {}, title: 'Test 1234' } ]; The above is working fine however when I do: var place = { id: 3, latitude:

angular-google-maps markers not showing up

▼魔方 西西 提交于 2019-12-04 15:35:50
So I am using the angular-google-maps directive from http://angular-ui.github.io/angular-google-maps/#!/api and I am unable to see my markers on my map instance. I have tried just about everything and am desperate for advice. I have tried moving the $scope.markers to my $scope.map object, tried moving it inside my $watch function, and adding the values directly into the html with no luck. I am thinking this has something to do with the $scope.control.refresh() function i had to add in order for the map to fully load inside a tab (i am using angular-bootstrap tabs). Thanks for any help! HTML

How do I pass a value from a ui-gmap-windows InfoWindow/Marker to ui-sref?

佐手、 提交于 2019-12-04 11:37:47
问题 I am trying to create a link inside an InfoWindow on a Google Map, using the angular-google-maps module's ui-gmap-windows . In my HTML template, I have: <ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'> <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true"> <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak> <div class="mapinfowindow" data-ui-sref="display({id: id})

angular-google-maps does now show correctly when it's hidden at start

天大地大妈咪最大 提交于 2019-12-04 09:11:11
When map starts hidden with ng-show/ng-hide, it does not show correctly once visible. Same trouble with a standard map, only we can send a resize to it since we have access to the map object. Here's a sample that starts with the map hidden. The button toggle the visibility of the map. <!doctype html> <html> <head> <style> .angular-google-map-container { width: 100%; height: 100px; } .mymap { width: 100%; height: 100px; } </style> </head> <body ng-app="app" ng-controller="myCtrl"> <button ng-click="visible = !visible">ToogleMap</button> <div ng-show="visible"> <google-map center="map.center"