Maps
Purpose
Maps are used to inform the customers of location-specific content. For example, maps can point out special offers or locate businesses who accept American Express. Our maps are designed to look familiar in order to decrease friction for customers, and include features such as map pins and summary cards to enhance the visual experience.
Map Pins
Usage
A map pin is used to visually represent a merchant’s unique set of coordinates on the map. A pin is made up of several states: default, hover, and selected.
Specs
Icon = Medium
Fill = Bright Blue (default), White (hover, selected)
Outline = White (default), Bright Blue (hover, selected)
Circle = White (default), Bright Blue (hover, selected)
Example - Pin States
Default
Hover and Selected
<h4 class="label-1 margin-b">Example - Pin States</h4>
<div>
<div class="flex flex-align-center">
<div class="pad-1 dls-gray-02-bg">
<img src="../../assets/img/visuals/components/maps/dls-icon-location-map-default.svg" alt="" />
</div>
<p class="pad-lr body-1">Default</p>
</div>
<div class="flex flex-align-center">
<div class="pad-1 dls-gray-02-bg">
<img src="../../assets/img/visuals/components/maps/dls-icon-location-map-hover.svg" alt="" />
</div>
<p class="pad-lr body-1">Hover and Selected</p>
</div>
</div>Summary Cards
Usage
Summary cards are used to provide a brief amount of information for a specific merchant. Details include distance, business name, and an additional feature if applicable, such as a category or a type of rating. This feature may also be available for filtering merchants. Due to limited real estate, try to keep the amount of information presented at no more than four lines of text.
Specs
Icons = Small, Deep Blue
Font = Body 2, Bright Blue (merchant name); Legal 2 (description), Legal 1 (address), Gray 06
Background = White (default), Gray 01 (hover, selected)
Example - List View And Map
<div class="row border margin-0">
<div class="map-poi-list col-md-6 col-xs-12 pad-0-lr-sm-down pad-0-tb-md-up">
<button class="fluid" data-value="139nail">
<div class="border-b pad-2 collapsible flex">
<i class="dls-deep-blue pad-1-r" data-dls-icon="concierge" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<div>
<h2 class="body-2 dls-bright-blue">139 Nail & Spa</h2>
<p class="legal-1 dls-gray-06">
139 W 72st<br>
New york, New York</p>
</div>
</div>
</button>
<button class="fluid" data-value="hoyip">
<div class="border-b pad-2 collapsible flex">
<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<div>
<h2 class="body-2 dls-bright-blue">Ho Yip Restaurant</h2>
<p class="legal-1 dls-gray-06">
<span class="legal-2">Food & Drinks</span><br>
110 Liberty Ground Floor<br>
New york, New York
</p>
</div>
</div>
</button>
<button class="fluid" data-value="lily">
<div class="border-b pad-2 collapsible flex">
<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<div>
<h2 class="body-2 dls-bright-blue">Lily O'brien's Bar & Restaurants</h2>
<p class="legal-1 dls-gray-06">
<span class="legal-2">Food and Drinks</span><br>
18 Murray St<br>
New York City, New York
</p>
</div>
</div>
</button>
<button class="fluid" data-value="nble">
<div class="border-b pad-2 collapsible flex">
<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<div>
<h2 class="body-2 dls-bright-blue">Nobletree Coffee World Trade</h2>
<p class="legal-1 dls-gray-06">
185 Greenwich St, Ste LI 2440<br>
Manhattan, New York
</p>
</div>
</div>
</button>
<button class="fluid" data-value="ice">
<div class="pad-2 collapsible flex">
<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
<div>
<h2 class="body-2 dls-bright-blue">Ice Futures Us</h2>
<p class="legal-1 dls-gray-06">
<span class="legal-2">Desert</span><br>
World Finance Center<br>
New york, New York
</p>
</div>
</div>
</button>
</div>
<div class="col-md-6 col-xs-12" id="map"></div>
</div>
<script>
function initMap() {
/* Get Map El */
var mapEl = document.getElementById('map');
mapEl.style.minHeight = '480px';
/* Create map instance*/
var map = new google.maps.Map(mapEl, {
zoom: 16,
center: new google.maps.LatLng(40.712948, -74.014327),
mapTypeId: 'roadmap',
/* Disable all default POI's */
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}]
});
/* Declare image paths for different icon types */
var icons = {
default: {
icon: {
url: 'https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/maps/dls-icon-location-default.svg',
scaledSize: new google.maps.Size(28, 28)
}
},
hover: {
icon: {
url: 'https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/maps/dls-icon-location-hover.svg',
scaledSize: new google.maps.Size(28, 28)
}
},
special: {
icon: {
url: 'https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/maps/dls-icon-location-special.svg',
scaledSize: new google.maps.Size(28, 28)
}
},
};
/* Array to store markers in */
var markerArr = [];
function openWindow(val) {
for(let i = 0; i < markerArr.length; i++){
markerArr[i]['infowindow'].close();
if (markerArr[i].value === val)
markerArr[i]['infowindow'].open(map, markerArr[i]);
}
}
/* Create marker instance */
function addMarker(feature, arr) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
size: new google.maps.Size(10, 10),
value: feature.value,
title: feature.title,
map: map,
optimized: false,
});
/* Assign an info window to the marker, whose content is the marker's title.*/
marker['infowindow'] = new google.maps.InfoWindow({
content: feature.title
});
/* Event listeners for markers */
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icons[feature.hover].icon);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icons[feature.type].icon);
});
google.maps.event.addListener(marker, 'click', function() {
openWindow(marker.value)
});
arr.push(marker);
}
/* Features that will determine each marker */
var features = [{
position: new google.maps.LatLng(40.713948, -74.014327),
type: 'default',
hover: 'hover',
title: '<div class="flex">' +
'<i class="dls-deep-blue pad-1-r" data-dls-icon="concierge" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>' +
'<div>' +
'<h2 class="body-2 dls-bright-blue">139 Nail & Spa</h2>' +
'<p class="legal-1 dls-gray-06">' +
'139 W 72st' +
'<br>New york, New York' +
'</p>' +
'</div>' +
'</div>',
value: '139nail'
}, {
position: new google.maps.LatLng(40.711984, -74.015265),
type: 'default',
hover: 'hover',
title: '<div class="flex">' +
'<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>' +
'<div>' +
'<h2 class="body-2 dls-bright-blue">Ho Yip Restaurant</h2>' +
'<p class="legal-1 dls-gray-06">' +
'<span class="legal-2">Food & Drinks</span>' +
'<br>110 Liberty Ground Floor' +
'<br>New york, New York' +
'</p>' +
'</div>' +
'</div>',
value: 'hoyip'
}, {
position: new google.maps.LatLng(40.711517, -74.01623),
type: 'default',
hover: 'hover',
title: '<div class="flex">' +
'<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>' +
'<div>' +
'<h2 class="body-2 dls-bright-blue">Lily O\briens Bar & Restaurants</h2>' +
'<p class="legal-1 dls-gray-06">' +
'<span class="legal-2">Food and Drinks</span>' +
'<br>18 Murray St' +
'<br>New York City, New York' +
'</p>' +
'</div>' +
'</div>',
value: 'lily'
}, {
position: new google.maps.LatLng(40.712359, -74.015534),
type: 'default',
hover: 'hover',
title: '<div class="flex">' +
'<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>' +
'<div>' +
'<h2 class="body-2 dls-bright-blue">Nobletree Coffee World Trade</h2>' +
'<p class="legal-1 dls-gray-06">' +
'185 Greenwich St, Ste LI 2440' +
'<br>Manhattan, New York' +
'</p>' +
'</div>' +
'</div>',
value: 'nble'
}, {
position: new google.maps.LatLng(40.710783, -74.016162),
type: 'default',
hover: 'hover',
title: '<div class="flex">' +
'<i class="dls-deep-blue pad-1-r" data-dls-icon="dining" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>' +
'<div>' +
'<h2 class="body-2 dls-bright-blue">Ice Futures Us</h2>' +
'<p class="legal-1 dls-gray-06">' +
'<span class="legal-2">Desert</span>' +
'<br>World Finance Center' +
'<br>New york, New York' +
'</p>' +
'</div>' +
'</div>',
value: 'ice'
}];
features.forEach(function(feature) {
addMarker(feature, markerArr);
});
var listPoi = [].slice.call(document.querySelectorAll('.map-poi-list > button'));
listPoi.map(function(poi, index) {
poi.addEventListener('click', function() {
var location = poi.getAttribute('data-value');
openWindow(location)
});
poi.addEventListener('click', function() {
listPoi.forEach(function(el) {
el.classList.remove('current');
});
poi.classList.add('current');
});
});
}
</script>
<style media="screen">
.map-poi-list {
padding: 0 0.25rem 0.25rem 0;
}
.map-poi-list button:focus,
.map-poi-list button.current {
outline-offset: -3px;
outline: rgb(83, 86, 90) dashed 1px;
}
#map .gmnoprint,
#map .gm-style-cc,
#map a[href*="google.com"] {
display: none !important;
}
#map .gmnoprint div {
background: none !important;
}
#map .gm-style .gm-style-iw-c {
border-radius: 4px
}
</style>
<script
async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"
></script>