TollMaps

TollMaps

Use the scripts up on CDN:


<!-- Dev -->
<script type="text/javascript" src="https://cdn.tollbrothers.com/lifestyles/tollmaps/tollmaps.js"></script>

<!-- Minified -->
<script type="text/javascript" src="https://cdn.tollbrothers.com/lifestyles/tollmaps/tollmaps.min.js"></script>



For a full demonstration, visit:

The All Awesome Example Map That Does Everything!

Basic Use

Use toll.map.init( mapID (String), location (Object) ).

mapID - The class or ID of your physical map in the DOM
location - A single location with name and latlong

For more on location properties, see locations.


<div id="myMap"></div>

<script>
toll.map.init(
    'myMap',
    { 
        name:       'Toll Headquarters',
        latlong:    '40.174703, -75.135844'
    }
);
</script>

Advanced Method

toll.map.init( mapID (String), properties (Object), locations (Array), callback (Function) ).

Advanced Parameters

mapID - (String) The class or ID of your physical map in the DOM
properties - (Object) Map properties
locations - (Array) An array of location objects.
callback - (Function) Callback function when your map is ready

For more on location properties, see locations.


<div id="myMap"></div>

<script>
var mapProperties = {
    key:    'AIzaSyC6BgkfHSn04LjLI3ZXV7ukuRp1vMcYPLs',
    zoom:   11,
};

var locations = [
    { name: 'Speed Raceway', latlong: '40.182548, -75.119743' },
    { name: 'Plenti Grand', latlong: '40.180370, -75.134200' }
];

function myFunc(d) {
    // do stuff when toll maps is ready
}

toll.map.init( 'myMap', mapProperties, locations, myFunc );
</script>

Icons (Markers)

Use the icon property inside a location object.

icon - (String) Image filepath
iconWidth - (Integer) Set a width for the icon.
iconHeight - (Integer) Set a height for the icon.
xOffset - (Integer) Offset the icon by x pixels.
yOffset - (Integer) Offset the icon by y pixels.


<div id="myMap"></div>

<script>
toll.map.init(
    'myMap',
    [{ 
        name:       'Toll Headquarters',
        latlong:    '40.174703, -75.135844',
        icon:       '/images/toll-pin.png'
    },
    { 
        // hi-res icon with offset anchor
        // original image is (64x66)
        name:       'Speed Raceway',
        latlong:    '40.182548, -75.119743',
        icon:       '/images/flag-pin.png',
        iconWidth:  32,
        iconHeight: 33,
        xOffset:    28,
        yOffset:    33
    }]
);
</script>

Labels

Create labels for your locations with the label flag.

label - (Boolean) Set to true to display a label. The default will be the location name.
labelHTML - (String) Override the label by setting it's HTML.

You can set variables in your HTML strings by using brakets { }.
Use .toll-map-label to style your labels.


<div id="myMap"></div>

<script>
toll.map.init(
    'myMap',
    [{ 
        name:       'Toll Headquarters',
        latlong:    '40.174703, -75.135844',
        label:      true,
    },
    { 
        // custom label with variables
        name:       'Speed Raceway',
        latlong:    '40.182548, -75.119743',
        label:      true,
        labelHTML:  '<span style="color:#fff;background-color:#000;">'+
                    '{name} <br/> {latlong}'+
                    '</span>'
    }]
);
</script>

Advanced Labels

With custom variables and styling, you can do some pretty nifty labels by setting the icon to a blank image.

icon Set to a blank image.
label true
labelHTML '{id}' or '{categoryID}'

<style>
.toll-map-label {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    border: 2px solid #ffffff;
    color: #ffffff;
    background-color: #ac42ad;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    font-weight: 600;
    font-family: sans-serif;
    margin-top: -12px;
}
</style>

<div id="myMap"></div>

<script>
toll.map.init(
    'myMap',
    [{ 
        name:       'Toll Headquarters',
        latlong:    '40.174703, -75.135844',
        icon:       '/images/toll-pin.png',
        iconWidth:  28,
        iconHeight: 33
    },
    { 
        name:       'Lees Hoagies',
        latlong:    '40.192931, -75.136756',
        icon:       'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif',
        category:   'restaurant',
        label:      true,
        labelHTML:  '{categoryID}'
    },
    { 
        name:       'McDonalds',
        latlong:    '40.179908, -75.105879',
        icon:       'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif',
        category:   'restaurant',
        label:      true,
        labelHTML:  '{categoryID}'
    },
    { 
        name:       'Plenti Grand',
        latlong:    '40.180370, -75.134200',
        icon:       'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif',
        category:   'restaurant',
        label:      true,
        labelHTML:  '{categoryID}'
    },
    { 
        name:       'Brick House Tavern',
        latlong:    '40.167183, -75.126304',
        icon:       'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif',
        category:   'restaurant',
        label:      true,
        labelHTML:  '{categoryID}'
    },
    ]
);
</script>

Info Windows

infoWindowHTML must be set in the map properties. To show an info window, you must set onclick or onhover events for your markers.

infoWindowHTML - (String) Html markup of the info window

You can set variables in your HTML strings by using brakets { }.
Use .toll-map-infowindow to style your info window.


<style>
.toll-map-infowindow { 
    background-color: #ffffff;
    font-size: 12px;
    color: #666;
    font-family: sans-serif;
    padding: 8px;
}
</style>

<div id="myMap"></div>

<script>
toll.map.init(
    'myMap',
    {
        infoWindow: '<div class="marker-title">{name}</div>' +
                    '<div class="marker-description">{description}</div>'
    },
    [{ 
        name:       'Toll Headquarters',
        description: 'This is where we all work!',
        latlong:    '40.174703, -75.135844',
        onclick:    function(d) {
            toll.map.showInfoWindow(d);
        }
    },
    { 
        name:       'Speed Raceway',
        description: 'How about a race?',
        latlong:    '40.182548, -75.119743',
        onhover:    function(d) {
            toll.map.showInfoWindow(d);
        }
    }]
);
</script>

Multiple Categories Example

Just set a category for each location. Each location has a categoryID and className.



<style>
.toll-map-label div {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    font-weight: 600;
    font-family: sans-serif;
    margin-top: -12px;
}
.toll-map-label div.restaurant { background-color: #429fad; }
.toll-map-label div.retail { background-color: #d58412; }
</style>

<script> toll.map.init( 'myMap', [{ name: 'Toll Headquarters', latlong: '40.174703, -75.135844', icon: '/images/toll-pin.png', iconWidth: 28, iconHeight: 33 }, { name: 'Lees Hoagies', latlong: '40.192931, -75.136756', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'restaurant', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, { name: 'McDonalds', latlong: '40.179908, -75.105879', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'restaurant', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, { name: 'Brick House Tavern', latlong: '40.167183, -75.126304', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'restaurant', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, { name: 'Home Depot', latlong: '40.163457, -75.127960', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'retail', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, { name: 'Pep Boys', latlong: '40.160347, -75.121969', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'retail', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, { name: 'Village Mall', latlong: '40.183167, -75.119083', icon: 'https://cdn.tollbrothers.com/lifestyles/tollmaps/blank.gif', category: 'retail', label: true, labelHTML: '<div class="{className}">{categoryID}</div>' }, ] ); </script>

Map Properties

Name Type Description
key String The Google Maps API key
zoom Integer Set the initial zoom when map loads
category String Initial category to show on the map, leave blank to show all categories
loadOnScroll Boolean Set this to true if you want Google Maps to only load when it is visible.
style Array Set the map style from snazzymaps.com


input_startAddress DOM The input address from a form for getting directions
button_getDirections DOM The button a user presses to get directions
button_clearDirections DOM Clear directions button
button_printDirections DOM Print directions button
text_printedDirections DOM The container where the direction steps will show

<script>

// Showing all properties for a map...
toll.map.init( 
    'myMap',
    {
        key:            // api key
        zoom:           // initial zoom
        category:       // initial category
        loadOnScroll:   // true/false
        infoWindow:     // html string

        input_startAddress : 
        button_getDirections : 
        button_clearDirections : 
        button_printDirections : 
        text_printedDirections : 

        zoomControl: true // or false,
        zoomControlPosition: 'BOTTOM_RIGHT' // TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT

        style :
    },
    { 
        name:       'Toll Headquarters',
        latlong:    '40.174703, -75.135844'
    }
);

</script>

Location Properties

name and latlong are the only required properties for locations.

Name Type Description
alwaysVisible Boolean Set to true to always have this location visible even when showing a specific category
name String required The name of the location
latlong String required The lat,long position
category String Location's category name
icon String URL path to an image
iconWidth Integer Width of the icon
iconHeight Integer Height of the icon
xOffset Integer Offset the icon by x pixels
yOffset Integer Offset the icon by y pixels
label Boolean Set to true to show a label
labelHTML String Create custom markup for the labels
infoWindow String HTML markup of an info window just for this marker
onclick Function A function to run when the location is clicked
onhover Function A function to run when the location is hovered

Additional Properties

These are properties that cannot be set but can be accessed.

Name Type Description
marker.properties.id Integer The id of the marker
marker.properties.categoryID Integer The marker's id within a category
marker.properties.className String Returns a class name string to be used for styling

<script>

// All properties for a single location...
toll.map.init( 
    'myMap',
    { 
        alwaysVisible:  true,
        
        name:           'Toll',
        latlong:        '40.174703, -75.135844',
        category:       'work',
        
        icon:           '/images/toll-pin.png',
        iconWidth:      28,
        iconHeight:     33,
        xOffset:        0,
        yOffset:        0,

        label:          true,
        labelHTML:      '{name} <br/> {latlong}',

        infoWindow:     '<div class="content">'+
                        '{name}'+
                        '</div>',

        onclick:        function(d) {  },              
        onhover:        function(d) {  }
    }
);

</script>

Functions

toll.map is the global object to use when calling these functions.

Name Params Description
shift( x, y ) x, y - Integers Shifts a map by x/y values in pixels
zoom( z ) z - Integer Zooms the rendered map
getZoom() Returns the current zoom level
setMarkers( array(m) ) An array of locations Change the visible markers on the map.
getMarker( marker ) marker - The marker object, name, or id Returns a marker object
selectMarker( marker ) marker - The marker object, name, or id Selects a marker object on the map. Can be used for set an ending address for directions with various locations.
centerMapToMarker( marker ) marker - The marker object, name, or id Closes an opened infoWindow
showCategory( category ) category - The string of a category or leave blank to show all Only shows locations with the same category or flagged 'alwaysVisible'
showInfoWindow( marker ) marker - The marker object, name, or id Shows an infoWindow by a marker
closeInfoWindow() Closes an opened infoWindow
getDirections() Gets the directions from input_startAddress value and a selected map marker
getDirections( address ) address - Full address string as a starting location Gets the directions from address value and a selected map marker
getDirections( start_address, end_address, callback ) Gets the directions from start_address to end_address with a callback on success
clearDirections() Clears the directions and hides direction steps, clear & print buttons
setTravelMethod( m ) Changes the travel method (m) - 'driving', 'walking', 'bicycling', 'transit'