react-hotels-on-map
v1.0.0
Published
Presents a set of hotels as clustered markers on Google Map, each with an info window displaying the hotel summary
Downloads
21
Maintainers
Readme
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.