Easy Maps v0.0.1

Create a store locator easily with Google Maps API. | GitHub

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

Note: the locations list below was not created by Easy Maps. You will need to render the list yourself.

Locations:

KFC AEON Mall Celadon (Mall)
KFC Nguyen Thai Hoc (Store)
Address: 221 Nguyễn Thái Học, Phường Cầu Ông Lãnh, Quận 1, Thành phố Hồ Chí Minh, Vietnam
KFC Crescent Mall (Mall)
KFC (Thiso Mall)
Address: 10 Đ. Mai Chí Thọ, Thủ Thiêm, Thành phố Thủ Đức, Thành phố Hồ Chí Minh, Vietnam
KFC Tinh Lo 10 (Store)
KFC Di An - Binh Duong (Store)

Init

const locations = [
    {
        // use name of the location as the address
        "address": "KFC AEON Mall Celadon",
    },
    {
        // use precise address
        "address": "221 Nguyễn Thái Học, Phường Cầu Ông Lãnh, Quận 1, Thành phố Hồ Chí Minh, Vietnam",
    },
    {
        // use additional latitude and longitude
        "address": "KFC Crescent Mall",
        "lat": 10.7290836,
        "lng": 106.6998187,
    },
];
const storeLocator = EasyStoreLocator.init({
    id: 'my-store-locator',
    target: '.my-store-locator',
    locations
});

address is required. You can also provide latitude and longitude for the most accurate location.

Search

Currently support searching from address only.

To control the visibility of the related DOM element when searching, use property selector:

{
    "address": "KFC AEON Mall Celadon",
    "selector": "#kfc-aeon", // CSS selector to map a DOM element
},

Call method search(query, setLocationsVisible)

// search and get results
storeLocator.search("query"); // => [...Location]

// search and show/hide locations based on the results
storeLocator.search("query", true);

Filtering

Use .filter() method to show the markers and mapped DOM elements that match the query. Items that do not match will be hidden.

const storeLocator = EasyStoreLocator.get('my-store-locator');
storeLocator.filter('*'); // filter all
storeLocator.filter('.mall'); // match CSS selector

Map style

The style of a map can be customized.
You can create a map style at mapstyle.withgoogle.com and paste the JSON here to preview.

Or try out these styles:

Use option mapStyle when init, or .setMapStyle() method to update the style.

infoWindow

infoWindow is a tooltip that shows when you click on a marker or a mapped DOM element. Use property infoWindow to set a custom content. By default, the content will be address.

{
    "address": "501a Đ. Nguyễn Tri Phương, An Bình, Dĩ An, Bình Dương, Vietnam",
    "selector": "#kfc-di-an",
    "infoWindow":"KFC Dĩ An - Bình Dương",
}

If the location has been mapped with a DOM element using selector, you can use "infoWindow": "selector" to use the inner HTML of the mapped element as the content for infoWindow.

{
    "address": "10 Đ. Mai Chí Thọ, Thủ Thiêm, Thành phố Thủ Đức, Thành phố Hồ Chí Minh, Vietnam",
    "selector": "#kfc-thiso-mall",
    "infoWindow": "selector"
},

To open/close a infoWindow, use method openInfoWindow(locationID) or closeInfoWindow(). The ID of each location can be set manually via id when init, or if the location has been mapped and the mapped element has an id attribute, the value of id will be used.