Wondering what’s next for npm?Check out our public roadmap! »

    react-hotels-on-map

    1.0.0 • Public • Published

    Build Status

    Summary

    Presents a set of hotels as clustered markers on Google Map, each with an info window displaying the hotel summary. That's a very simple, narrowly specialized component, tailored for hotels. If you need something more general, take a look at react-google-maps. Yet another difference from react-google-maps is the React 0.13 support: react-google-maps v4+, which is capable of clustering map markers, requires React 0.14.

    Usage

    import React from 'react';
    import HotelsOnMap from 'hotels-on-map';
     
    const props = {hotels: [{
        ratingStars: 5,
        name: 'Hôtel InterContinental Genève',
        streetAddress: 'Chemin du Petit-Saconnex 7-9',
        postalCode: '1209',
        cityLocalized: 'Genève',
        geolocation: {latitude: 46.22425, longitude: 6.132383}
    }, {
        ratingStars: 3,
        name: 'Hôtel Eden',
        streetAddress: 'Rue de Lausanne 135',
        postalCode: '1202',
        cityLocalized: 'Genève',
        geolocation: {latitude: 46.221928, longitude: 6.148965}
    }/* ... */]};
     
    React.render(
        <HotelsOnMap {...props}/>,
        global.document.getElementById('root')
    );

    The code above will display and cluster all the hotel markers on the map, making sure that all the clustered markers are visible. On a marker click, an info-window with the short hotel information will be displayed.

    You're encouraged to also set the markerClusterImageUrlPrefix prop value, and host the cluster images on your own Web property. The default value is https://www.swisshotels.com/client-side-public/img/markerclustererplus/m, giving you those:

    One hotel case

    When the length of the hotels array is 1, an info window for the single hotel is displayed immediately, saving the user a marker click.

    Demo

    See the short example code with that sample data running live here.

    Install

    npm i react-hotels-on-map

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar