Lightning-Map demo in Lightning Web Component (LWC)

currentLocationLWC.html

<template>

    <lightning-card>

        <lightning-layout>

            <lightning-layout-item class="slds-p-left_small">

                <lightning-icon icon-name="action:map" 

                                size='small' 

                                variant='success' 

                ></lightning-icon>

            </lightning-layout-item>

            <lightning-layout-item>

                <p class="slds-p-horizontal_small slds-m-top_small" 

                   style="color: #87CEFA">

                    <b>

                        Mark your current location and destination on Map

                    </b>

                </p>

            </lightning-layout-item>

        </lightning-layout>

        <lightning-layout>

            <lightning-layout-item size="4" 

                                   padding="around-small" 

                                   large-device-size="4">

                <p style="font-size: 14px; color: #800000">

                    <b>Enter a destination</b>

                </p>

                <p>

                    <lightning-input value={street} 

                                     data-field="Street" 

                                     variant="label-hidden" 

                                     placeholder="Street/Locality" 

                    ></lightning-input>

                    <lightning-input value={city} 

                                     data-field="City" 

                                     variant="label-hidden" 

                                     placeholder="City" 

                    ></lightning-input>

                    <lightning-input value={pincode} 

                                     data-field="Pincode" 

                                     variant="label-hidden" 

                                     placeholder="Pincode" 

                    ></lightning-input>

                    <lightning-input value={state} 

                                     data-field="State" 

                                     variant="label-hidden" 

                                     placeholder="State" 

                    ></lightning-input>

                    <lightning-input value={country} 

                                     data-field="Country" 

                                     variant="label-hidden" 

                                     placeholder="Country" 

                    ></lightning-input>

                </p><br/>

                <lightning-button variant="brand" 

                                  onclick={markDestination} 

                                  label="Mark my Destination" 

                ></lightning-button>

            </lightning-layout-item>

            <lightning-layout-item size="8" 

                                   padding="around-small" 

                                   large-device-size="8">

                <lightning-map map-markers={lstMapMarkers} 

                               zoom-level={zoomLevel} 

                ></lightning-map>

            </lightning-layout-item>

        </lightning-layout>

    </lightning-card>

</template>

currentLocationLWC.js:

import { LightningElement } from 'lwc';

export default class CurrentLocationLWC extends LightningElement {

    lstMapMarkers = [];

    zoomLevel = 5;

    street = '';

    city = '';

    pincode = '';

    state = '';

    country = '';

    latitude = '';

    longitude = '';

    connectedCallback(){

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(position => {

                this.latitude = position.coords.latitude;

                this.longitude = position.coords.longitude;

                this.lstMapMarkers = [{

                    location : {

                        Latitude : this.latitude,

                        Longitude : this.longitude

                    },

                    title : 'This is your current location'

                }];

            });

        }

    }

    markDestination(){

        this.street = this.template.querySelector("[data-field='Street']")

                      .value;

        this.city =  this.template.querySelector("[data-field='City']")

                     .value;

        this.pincode = this.template.querySelector("[data-field='Pincode']")

                    .value;

        this.state = this.template.querySelector("[data-field='State']")

                     .value;

        this.country = this.template.querySelector("[data-field='Country']")

                       .value;

        let destinationVar = {

            Street: this.street,

            City: this.city,

            PostalCode: this.pincode,

            State: this.state,

            Country: this.country,

        }

        this.lstMapMarkers = [

            {

                location : {

                    Latitude : this.latitude,

                    Longitude : this.longitude

                },

                title : 'This is your current location'

            },

            {

                location : {

                    Street: this.street,

                    City: this.city,

                    PostalCode: this.pincode,

                    State: this.state,

                    Country: this.country

                },

                title : 'This is your destination'

            }];

    }

}