map

A map component is used to find a location

Base

Salesforce Locations In United States (9)

<div class="slds-grid slds-has-coordinates">
  <div class="slds-map_container">
    <div class="slds-map">

Mobile

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, maps will have increased header text size along with other small adjustments.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

States

First Coordinate Selected

Salesforce Locations In United States (9)

  • Worldwide Corporate Headquarters is currently selected
<div class="slds-grid slds-has-coordinates">
  <div class="slds-map_container">
    <div class="slds-map">

Second Coordinate Selected

Salesforce Locations In United States (9)

  • salesforce.com inc Atlanta is currently selected
<div class="slds-grid slds-has-coordinates">
  <div class="slds-map_container">
    <div class="slds-map">

Examples

In Modal - Single Coordinate With Footer

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-id-01" aria-describedby="modal-content-id-01" aria-modal="true">
  <div class="slds-modal__container">
    <header class="slds-modal__header">

In Modal - Multiple Coordinates With Footer

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-id-01" aria-describedby="modal-content-id-01" aria-modal="true">
  <div class="slds-modal__container">
    <header class="slds-modal__header">