I looked for an information for several weeks. First, I'm using AngularJS 1.6 and ngMap module.
Here's what I'm doing:
I'm using a search box (with
ngMap
autocomplete) in my Homepage:import htmlTemplate from './searchBox.html'; export default { template: htmlTemplate, require: { parent: '^home' }, controller: function controller(MapsService, $log) { 'ngInject'; const self = this; this.$onInit = () => { $log.info('searchBox component init'); MapsService.loadGoogleApi().then(() => { this.loaded = true; this.onPlaceChanged = function onPlaceChanged() { const place = this.getPlace(); if (place.geometry) { self.activity.lat = place.geometry.location.lat(); self.activity.lng = place.geometry.location.lng(); } }; });
Also, I'm using a component which shows activities. When I create an activity via my form, I fill an address field which uses autocomplete.
<div class="input-field col s12"> <i class="material-icons prefix">location_on</i> <input ng-if="$ctrl.loaded" places-auto-complete ng-model="$ctrl.activity.address" id="icon_prefix" type="text" on-place-changed="$ctrl.onPlaceChanged()" class="validate"> <label for="icon_prefix">{{'ANNOUNCE.ADDRESS' | translate}} </label>
I specified that addresses are converted in latitude / longitude.
MapsService.loadGoogleApi().then(() => { this.loaded = true; this.onPlaceChanged = function onPlaceChanged() { const place = this.getPlace(); if (place.geometry) { self.activity.lat = place.geometry.location.lat(); self.activity.lng = place.geometry.location.lng(); } }; });
My question is:
How to show activities (by city) by making coincide the address of my search box and the address of my form?
Thanks a lot !