How to define size and zoom out of a google map in LWC?

Question

HTML :

  <label for="pays">Pays</label>

 <lightning-output-field
     field-name="Country__c" variant="label-hidden" id="pays"
   ></lightning-output-field> </br>

<lightning-layout-item  class="slds-p-left_x-small">
<lightning-card variant="Narrow" title="Addresse" icon-name="standard:location">

   <lightning-map  map-markers={mapMarkers} list-view="hidden"></lightning-map>
</lightning-card>

JS :

  @track mapMarkers = [];

  @wire(getRecord, {
      recordId: '$recordId',
   fields: [ COUNTRY_FIELD, CITY_FIELD  ]
             },getRecentModifiedContacts)
 fetchAcc({ data, error }) {
if (data) {
this.mapMarkers = [
    {
        location: {
            City: data.fields.City__c.value,
            Country: data.fields.Country__c.value,
          },


    }
];
console.log('this.mapMarkers => ', JSON.stringify(this.mapMarkers));
  } else if (error) {
console.error('ERROR => ', error);
}

Answer 1

The zoom level can be defined by the zoom-level attribute, to zoom out entirely use a value of 1. To set the size, you can either wrap the map in a div and provide explicit size or user slds-size classes.

Example:

HTML

<template>
    <label for="pays">Pays</label>
    <lightning-card variant="Narrow" 
title="Addresse" icon-name="standard:location">
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-1">
                <lightning-map  map-markers={mapMarkers}  
zoom-level="10"
list-view="hidden"></lightning-map>
            </div>
            <div class="slds-col slds-size_2-of-4">
                <lightning-map  map-markers={mapMarkers}  
zoom-level="10"
list-view="hidden"></lightning-map>
            </div>
        </div>
    </lightning-map>
</lightning-card>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track mapMarkers = [
        {
            location: {
                City: 'Mumbai',
                Country: 'India',
            },


        }
    ];
}