# GM - Map Record

## **Documentation**

**GM - Google Map** component is used to display Google map view of location. The component can be configured to map the current object or any related object. The location could be on a standard or a custom object.

**Use case:** Display a property on Google Maps for a real estate company.

## **Specification**

<table data-full-width="true"><thead><tr><th width="208.33333333333331">Property</th><th width="139">Type</th><th>Description</th></tr></thead><tbody><tr><td>Record Id Field *</td><td>String</td><td><p>The name of the lookup field to maps. </p><p></p><p>Set this property to recordId to use the current recordId.</p></td></tr><tr><td>Place Fields *</td><td>String</td><td>',' Separated list of fields to build the address. Ex <strong>BillingStreet,BillingCity,BillingState.</strong> This property is useful for place view only.</td></tr><tr><td>Latitude Field *</td><td>String</td><td>Latitude Field. Ex <strong>BillingLatitude</strong>. This property is useful for street view only.</td></tr><tr><td>Longitude Field *</td><td>String</td><td>Longitude Field. Ex <strong>BillingLongitude</strong>. This property is useful for street view only.</td></tr><tr><td>Maps View</td><td>String</td><td>Maps default view <strong>place</strong> | <strong>streetview.</strong> The user can still switch to a different view if <strong>Enable Switch View</strong> is checked.</td></tr><tr><td>Enable Switch View</td><td>Boolean</td><td>Check this option to allow the user to switch between <strong>place</strong> and <strong>street</strong> view.</td></tr><tr><td>Maps Height</td><td>Integer</td><td>The height of the map.</td></tr><tr><td>Custom Label</td><td>String</td><td>The title of the map.</td></tr><tr><td>Custom Icon</td><td>String</td><td><p>The card icon. All lightning icons are supported. </p><p></p><p>The list of icons is available under <a href="https://lightningdesignsystem.com/icons/">https://lightningdesignsystem.com/icons/</a>.</p></td></tr><tr><td>Show Border</td><td>Boolean</td><td>Check this option to add a border to the card.</td></tr></tbody></table>

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="MapComponent.design" %}

```xml
<design:component label="GM - Map Record">
    <design:attribute name="recordIdField" label="Record Id Field" 
            description="Record Id Field"/> 
    <design:attribute name="placeField" label="Place Fields" 
            description="',' Separated list of fields to build the address. Ex BillingStreet,BillingCity,BillingState"/> 
    <design:attribute name="latitudeField" label="Latitude Field" 
            description="Latitude Field. Ex BillingLatitude"/> 
    <design:attribute name="longitudeField" label="Longitude Field" 
            description="Longitude Field. Ex BillingLongitude"/> 
    <design:attribute name="view" label="Maps View" 
            description="Default view. Available options are place|streetview"/> 
    <design:attribute name="enableSwitchView" label="Enable Switch View?" 
            description="Enable switch view from Place to StreetView"/>             
    <design:attribute name="height" label="Maps Height" 
            description="Maps Height. The width is automatically calculated"/> 
    <design:attribute name="customLabel" label="Custom Label" 
            description="The label of card"/> 
    <design:attribute name="customIcon" label="Custom Icon" 
            description="Customize the map icon. All lightning icons are supported. You can get the icon name from https://lightningdesignsystem.com/icons/"/> 
    <design:attribute name="showBorder" label="Show Border" 
            description="Show Border"/>
</design:component>
```

{% endtab %}
{% endtabs %}