I want to pass lat
and lng
from an ember component to another ember component (g-map
). My handlebars template:
{{!-- Index.hbs --}}
<div class="jumbotron-outside">
<div class="jumbotron">
<h1 class="display-3">See The Weather Outside :)</h1>
<p class="lead">This is a simple forecast weather.</p>
<hr class="my-4">
<p>Just type everything bellow this input text to get all list of the city</p>
{{text-autocomplete}}
<p class="lead">
<button class="btn btn-primary btn-default" href="#" role="button" disabled={{isDisabled}}>Search</button>
</p>
</div>
{{g-map lat=lat lng=lng zoom=zoom}}
</div>
and this is for my text-autocomplete component:
// text-autocomplete/component.js
import Ember from 'ember';
let lat;
let lng;
export default Ember.Component.extend({
didInsertElement() { //dom can be acessed here :)
var autocomplete = new google.maps.places.Autocomplete($('input')[0]);
var parent = this.$('input');
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
});
}
});
I want to pass the lat
and lng
values from text-autocomplete
component to the g-map
component to draw a marker in the google map.
Can anyone solve this? :(
Create index.js
controller file and introduce lat
, lng
and zoom
properties. you can pass this properties to components text-autocomplete
and g-map
. text-autocomplete
this component should send actions to controller for updating new values for lat
and lng
because of two way binding it will automatically update in other places too.
index.js controller file,
import Ember from 'ember';
export default Ember.Controller.extend({
lat:'',
lng:'',
zoom:'',
actions:{
updateLatAndLng(lat,lng){
this.set('lat',lat);
this.set('lng',lng);
}
}
});
index.hbs
{{text-autocomplete lat=lat lng=lng updateLatAndLng=(action 'updateLatAndLng')}}
{{g-map lat=lat lng=lng zoom=zoom}}
text-autocomplete.js file
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() { //dom can be acessed here :)
var autocomplete = new google.maps.places.Autocomplete($('input')[0]);
var parent = this.$('input');
let _this = this;
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
_this.sendAction('updateLatAndLng',lat,lng); //here we are sendin actions to controller to update lat and lng properties so that it will reflect in all the other places.
});
}
});