@wmyl/places v1.1.8

@wmyl/places

Interactive map based on Google Maps. Each place can have a popup with information, along with other features such as in-view list and clustering.

Installation

npm install --save @wmyl/places

Usage

Step 1 - Get Google Maps API key

Don't worry! It's free, at least for a smaller amount of request.

https://developers.google.com/maps/documentation/javascript/get-api-key

Step 2 - Add HTML

Add container such as div with class name places in HTML

<div class="places"></div>

Step 3 - Init JavaScript

import Places from '@wmyl/places';

...

const options = {
    tag: "https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY_HERE>",
    places: [{
        lat: 57.682909,
        lng: 11.932970,
        name: 'My First Place'
        address: 'Exampleroad 23',
        link: 'https://github.com/wmyl/places',
        phone: '555-1234567',
        comment: 'This place is wonderful!'
    }, {
        lat: 58.232909,
        lng: 07.562970,
        name: 'My Second Place'
        address: 'Exampleroad 25',
        link: 'https://github.com/wmyl/places',
        phone: '555-1234569',
        comment: 'This place is almost as wonderful!'
    }],
    popup: true,
    mapStyle: 'minimalistic',
    imagePath: '/assets/static/images/dog',
    sidebar: {
        footer: {
            text: 'Visit our site!',
            logo: '/assets/static/images/companyLogo.png',
            logoLink: 'https://github.com/wmyl/places'
        }
    },
};

new Places(options);

...

Step 4 (Optional) - Add custom styling

You can override all styling on the map with your own css.

Options

Place object

Popup options

Map styling

It is possible to either specify a custom array of Google Map styles, see more here: https://mapstyle.withgoogle.com/

It is also possible to specify one of predefined styles. Current valid stlyes are:

• default
• minimalistic

Image paths

Path to the collection of images for the place icons. The images need to be in .png-format. The file ending (.png) will automatically be appended. If types are used, this will be appended to the image path as well. Note that if pinImagePath is not specified, Google Maps default pins will be used for the map and no icons will be shown in sidebar.

For example, if image path is place_ and a place has type "hotel" the map will expect there is an image named place_hotel.png. If the place has no type, simply place_.png will be expected.

Sidebar options

Options can be specified but for default usage true is enough. Will display a sidebar to the leftwith all places in viewport. Has a search bar at the top. On mobile, the sidebar will be on the lower half of the screen and is minimizable. On mobile phones, the sidebar will be minimized when tapping a marker on the map.

Search bar options

Footer options

Clusterer options

Clusterer will put close places together in a cluster with a number showing how many places are clustered in the cluster.

The imagePath is similar to the imagePath of the main options but more strict. It requires that there are five different square PNG images, each ending with a number from 1 to 5. For example, if imagePath is cluster_ball_, the clusterer will expect that there are five images; cluster_ball_1.png, cluster_ball_2.png, cluster_ball_3.png, cluster_ball_4.png and cluster_ball_5.png. This is unfortunately how the used library js-marker-clusterer works.

Examples

Bare minimum map

This is the absolute minimum configuration - it will only show the default Google Maps.

const options = {
    tag: "https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>",
};

new Places(options);