@golocalinteractive/se-facility-map v2.1.1

Facility Map

Install

Install with npm:

npm install --save @golocalinteractive/se-facility-map

Getting Started

The Storage Essentials Facility Map is a wrapper class for Google Maps and is used to provide a flexible standard for implementing maps. Functions that are public or marked @api are meant for general use.

Usage

Below is a base example with zero customization. This does assume your markup uses the default values.

Javascript

import SeFacilityMap from '@golocalinteractive/se-facility-map';

const map = new SeFacilityMap();

HTML

<div id="marketMap" class="h-100"></div>

<!-- Location element with data-lat and data-lng attributes. Used to create your location markers. -->
<div class="facility-item" data-lat="38.930243" data-lng="-94.687515">
    <!-- HTML of your choosing -->
    <!-- Info window container (optional to include info windows) - display: none; so it's hidden from view. -->
    <div class="map-info-window-container" style="display:none;">
        <!-- Inner HTML (contents of your marker info window) -->
        <div class="map-info-window">
            <div class="map-info-window-content">
                <h4 class="infowindow-title">Go Local Interactive</h4>
                <p class="infowindow-p">10975 Benson Dr #250
                    <br />Overland Park, KS 66210
                    <br />(913) 689-3170
                </p>
                <a role="button" class="btn btn-primary btn-sm btn-infowin" href="https://www.google.com/maps/dir/?api=1&destination=38.930243,-94.687515" target="_blank">Get Directions</a>
            </div>
        </div>
    </div>
</div>

...

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Reset

If you filter results with javascript you may want to update the map with the filtered results.

reset() will reset locations based on your locationClass setting which also checks :not(.filtered). This allows you to change the markup to add more/less of locationClass or add or remove the class .filtered to those elements to provide different results.

const map = new SeFacilityMap();

// Listen for custom seGeoSearch event and trigger a rerender of your map.
document.addEventListener("seGeoSearch", function (event) {
    map.reset();
});

// Listen for custom seMarketFilter event and trigger a rerender of your map.
document.addEventListener("seMarketFilter", function (event) {
    map.reset();
});

Options

The following are options that will allow you to customize the map to your needs.

Base Options

Marker Options

Below you can find the custom options for the Marker options.

SeMarkerLabel

Extends google.maps.MarkerLabel, see google.maps.MarkerLabel for more information.

SeMarkerIcon

Extends google.maps.Symbol, see google.maps.Symbol for more information.

Custom getLocations()

Chances are you don't need to create a custom getLocations() function. If you pass the appropriate locationClass for your needs and use .map-info-window-container (display: none) to wrap your info window HTML then you can ignore this. By default we use SeFacilityMap@getLocations(). This option is deprecated and likely will be removed entirely in a future major release.