Component Blueprints

Map

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:True
  • Layout:Responsive

Sections

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">
      <iframe id="GoogleMapID" title="Google Maps iframe" src="https://www.google.com/maps/embed/v1/place?q=1%20market%2C%20san%20francisco&amp;key=AIzaSyDliLquGXGts9S8YtkWVolSQEJdBL1ZuWc"></iframe>

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 Salesforce native mobile applications. 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">
      <iframe id="GoogleMapID" title="Google Maps iframe" src="https://www.google.com/maps/embed/v1/place?q=1%20market%2C%20san%20francisco&amp;key=AIzaSyDliLquGXGts9S8YtkWVolSQEJdBL1ZuWc"></iframe>

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">
      <iframe id="GoogleMapID" title="Google Maps iframe" src="https://www.google.com/maps/embed/v1/place?q=1%20market%2C%20san%20francisco&amp;key=AIzaSyDliLquGXGts9S8YtkWVolSQEJdBL1ZuWc"></iframe>

Examples#

<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-id-01" class="slds-modal slds-fade-in-open slds-modal_medium">
  <div class="slds-modal__container">
    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
      <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-id-01" class="slds-modal slds-fade-in-open slds-modal_medium">
  <div class="slds-modal__container">
    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
      <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">

Overview of CSS Classes#

Selector.slds-map_container
Summary

Map container

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-map
Summary

3rd party map element found inside of the map container

Restrict.slds-map_container div

Map Release Notes

2.11.7

Added

  • Added documentation and examples for mobile/touch context

2.10.0

Changed

  • For touch devices:
    • Adjusted padding around map
    • Removed height restriction on .slds-has-coordinates to prevent internal scrolling of long lists
    • Increased font size of .slds-coordinates__title

2.7.0

Added

  • Added a standalone map example that lives outside of a modal

Fixed

  • Replaced inline styles from iframe and placed them within the component styling
  • Improved the color contrast of links inside of selected items in the locations list