map pin

src/app/nearby/nearby.page.html

@@ -19,29 +19,27 @@
 </ion-header>
 <ion-content>
     <div class="nearby_map">
-        <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'"
-            (mapReady)="mapReady($event)" (centerChange)="centerChange($event)">
-            <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
-                (dragEnd)="markerDragEnd($event)" [iconUrl]="
+        <div class="map-inner">
+            <agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="8" [backgroundColor]="'rgba(29, 27, 130,0.2)'" (mapReady)="mapReady($event)" (centerChange)="centerChange($event)">
+                <agm-marker [markerDraggable]="true" (dragEnd)="markerDragEnd($event)" [iconUrl]="
       {
         url: './assets/pin.svg',
         scaledSize: {
             width: 28,
             height: 40
         }}"></agm-marker>
-        </agm-map>
-        <form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post"
-            class="form-horizontal">
+            </agm-map>
+            <span class="map-pin"><img src="../../assets/pin.svg" alt=""></span>
+        </div>
+        <form (ngSubmit)="onSubmit(addressForm.value); addressForm.reset()" #addressForm="ngForm" method="post" class="form-horizontal">
             <div class="add_address_wrapper">
                 <h5>DELIVERY</h5>
                 <p>{{address}}</p>
-                <input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required
-                    placeholder="House No./ Building No" />
+                <input [(ngModel)]="addressForm.building" name="building" #building="ngModel" name="building" required placeholder="House No./ Building No" />
                 <div class="md-errors-spacer" [hidden]="building.valid || landmark.pristine" class="ion-padding-start">
                     Building Name is required
                 </div>
-                <input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required
-                    placeholder="Landmark" />
+                <input [(ngModel)]="addressForm.landmark" name="landmark" #landmark="ngModel" name="landmark" required placeholder="Landmark" />
                 <div class="md-errors-spacer" [hidden]="landmark.valid || landmark.pristine" class="ion-padding-start">
                     Landmark is required
                 </div>
@@ -49,31 +47,24 @@
                     <ion-row>
                         <ion-col>
                             <h6>
-                                <input class="styled-checkbox" id="styled-check-1" type="radio" value="Home"
-                                    [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
-                                    required />
+                                <input class="styled-checkbox" id="styled-check-1" type="radio" value="Home" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
                                 <label for="styled-check-1"><span>Home</span></label>
                             </h6>
                         </ion-col>
                         <ion-col>
                             <h6>
-                                <input class="styled-checkbox" id="styled-check-2" type="radio" value="Work"
-                                    [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
-                                    required />
+                                <input class="styled-checkbox" id="styled-check-2" type="radio" value="Work" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
                                 <label for="styled-check-2"><span>Office</span></label>
                             </h6>
                         </ion-col>
                         <ion-col>
                             <h6>
-                                <input class="styled-checkbox" id="styled-check-3" type="radio" value="Other"
-                                    [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel"
-                                    required />
+                                <input class="styled-checkbox" id="styled-check-3" type="radio" value="Other" [(ngModel)]="addressForm.addressType" name="addressType" #addressType="ngModel" required />
                                 <label for="styled-check-3"><span>Others</span></label>
                             </h6>
                         </ion-col>
                     </ion-row>
-                    <div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine"
-                        class="ion-padding-start">
+                    <div class="md-errors-spacer" [hidden]="addressType.valid || addressType.pristine" class="ion-padding-start">
                         Address Type is required
                     </div>
                 </ion-grid>

src/app/nearby/nearby.page.scss

@@ -5,6 +5,18 @@
     .nearby_map {
         width: 100%;
         height: 100%;
+        .map-inner {
+            height: calc(100% - 348px);
+            position: relative;
+            .map-pin {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                -webkit-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+                width: 25px;
+            }
+        }
         .overlay {
             position: absolute;
             top: 0px;
@@ -15,7 +27,7 @@
         }
         agm-map {
             width: 100%;
-            height: calc(100% - 330px);
+            height: 100% !important;
             .overlay {
                 position: absolute;
                 top: 0px;
@@ -150,8 +162,7 @@
                     margin: 0;
                 }
             }
-            agm-map {
-                width: 100%;
+            .map-inner {
                 height: calc(100% - 235px);
             }
         }