dc

src/app/home/index/index.component.html

@@ -467,7 +467,7 @@
                                 <ul>
                                     <li *ngFor="let mechanic of mechanicData">
                                         <div class="row">
-                                            <div class="col-md-6">
+                                            <div class="col-md-6 pr0">
                                                 <div class="mechanic_profile">
                                                     <div class="mechanic_profile_inner">
                                                         <div class="mechanic_photo_wrapper">
@@ -519,8 +519,25 @@
                                 <div class="clear"></div>
                             </div>
                             <div class="service_map">
-                                <agm-map [latitude]="lat" [longitude]="lng">
-                                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+                                <!-- <agm-map [latitude]="lat" [longitude]="lng">
+                                    <div *ngFor="let mechanicLoc of mechanicData">
+                                        <agm-marker 
+                                            [latitude]="mechanicLoc.location_lat" 
+                                            [longitude]="mechanicLoc.location_lng"
+                                            [label]="{color: 'black', text: mechanicLoc.display_name}">
+                                        </agm-marker>
+                                    </div>
+                                </agm-map> -->
+
+                                <agm-map #gm [zoom]="15">
+                                    <agm-marker *ngFor="let mechanicLoc of mechanicData"
+                                                [latitude]="mechanicLoc.location_lat"
+                                                [longitude]="mechanicLoc.location_lat"
+                                                (mouseOver)="onMouseOver(infoWindow,gm)">
+                                        <agm-info-window [disableAutoPan]="false" #infoWindow>
+                                            <div>{{mechanicLoc.display_name}}</div>
+                                        </agm-info-window>
+                                    </agm-marker>
                                 </agm-map>
                             </div>
                         </div>

src/app/home/index/index.component.scss

@@ -774,7 +774,7 @@
                 li {
                     list-style: none;
                     display: inline-block;
-                    width: 33.3%;
+                    width: 50%;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -806,6 +806,7 @@
                     .mechanic_profile_inner {
                         background: #fbfbfb;
                         padding: 10px;
+                        padding-right: 0px;
                         .mechanic_photo_wrapper {
                             float: left;
                             width: 100px;
@@ -902,10 +903,12 @@
                     width: calc(100% - 80px);
                     margin: 0 auto;
                     height: 200px;
+                    position: relative;
+                    left: 5px;
                     ul {
                         margin: 0px;
                         padding: 0px;
-                        width: 33.3%;
+                        width: 50%;
                         height: 100%;
                         overflow: scroll;
                         display: inline-block;
@@ -923,9 +926,11 @@
                 }
                 .scheduletiming_btm_btns {
                     width: calc(100% - 80px);
+                    position: relative;
+                    left: 5px;
                     margin: 0 auto;
                     .btm_btns {
-                        width: 33.3%;
+                        width: 50%;
                         display: inline-block;
                         height: 40px;
                         text-align: center;

src/app/home/index/index.component.ts

@@ -218,7 +218,9 @@ export class IndexComponent implements OnInit {
       this.loader = false;
       if(response.status == '1'){
         this.mechanicData = response.mechanic_data;
-        console.log(this.mechanicData);
+
+        this.lat = this.mechanicData[0]['location_lat'];
+        this.lng = this.mechanicData[0]['location_lng'];
       } else {
         this.router.navigate(["index"]);
       }
@@ -227,6 +229,14 @@ export class IndexComponent implements OnInit {
     });
   }
 
+  onMouseOver(infoWindow, gm) {
+    if (gm.lastOpen != null) {
+        gm.lastOpen.close();
+    }
+    gm.lastOpen = infoWindow;
+    infoWindow.open();
+  }
+
   featuredOnLoad() {return ''; }
   carouselTileLoad(){ return ''; }
 }