i am very new to ionic framework. I want to add multiple markers along with the information card in the slider form just like the image attached with this . I have able to add multiple markers in the map but no idea how to add information slider which will activate the marker. corresponding to the slider. Can any please give me some hint on how to work with this.
My eventmap.ts file to show multiple markers
export class EventMapPage { public userToken:any; public userPostData = {"api_token":""}; public responseData:any; public dataSet:any; @ViewChild('map') mapRef:ElementRef; constructor(...) { this.getEvents().then(result=> { this.responseData = result; this.DisplayMap(this.responseData); }); } //Get all the available events getEvents(){ const data = localStorage.getItem('userToken'); this.userPostData.api_token= data; return this.authService.postData(this.userPostData,'events'); } //Initializing the map DisplayMap(data) { this.geolocation.getCurrentPosition().then((resp) => { const location = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude); const options = { center:location, zoom:10, mapTypeControl: false, streetViewControl:false, }; const map = new google.maps.Map(this.mapRef.nativeElement,options); //Loop the markers if(data != null){ for(var i=0; i<data.length; i++){ this.multipleMaker(parseFloat(data[i].lat),parseFloat(data[i].lon),map); } } }).catch((error) => { console.log('Error getting location', error); }); } //Marker function multipleMaker(lat,lng,map) { return new google.maps.Marker({ position:{lat:lat,lng:lng}, map:map }); } } 
1 Answers
Answers 1
After some trail an error , research on google, i finally figured it out .
The solution to this that i come up with is as follows
in map.html
<ion-content > <div #map id="map"> </div> <div class="slider-wraper"> <ion-slides slidesPerView="1" (ionSlideDidChange)="slideChanged()"> <ion-slide *ngFor="let item of responseData?.weekEvents"> <ion-card tappable (click)="viewDetail(item.id)"> <div class="event-image-holder search-list"> <img src="http://localhost:8000/{{item.photo_url}}"/> </div> <ion-card-content> <div class="event-info"> <div class="event-descp"> <h2>{{item.title}}</h2> <p> {{item.club.name}} </p> <p> <strong>{{item.attendees.length}} are going</strong> </p> </div> </div> </ion-card-content> </ion-card> </ion-slide> </ion-slides> </div> </ion-content> in map.ts
First import slider
import { Slides } from 'ionic-angular'; Then inside class get the reference of the slider
@ViewChild(Slides) slides: Slides; Then add this methord
slideChanged() { let currentIndex = this.slides.getActiveIndex(); let currentEvent =this.responseData.weekEvents[currentIndex]; this.map.setCenter({lat: parseFloat(currentEvent.lat),lng:parseFloat(currentEvent.lon)}); } This will make the marker of current slider as the center of the map
Only thing now left to do is clicking on marker should make the slider active. I will update it here once its done. :))
0 comments:
Post a Comment