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.
;;const props = hotels:ratingStars: 5name: 'Hôtel InterContinental Genève'streetAddress: 'Chemin du Petit-Saconnex 7-9'postalCode: '1209'cityLocalized: 'Genève'geolocation: latitude: 4622425 longitude: 6132383ratingStars: 3name: 'Hôtel Eden'streetAddress: 'Rue de Lausanne 135'postalCode: '1202'cityLocalized: 'Genève'geolocation: latitude: 46221928 longitude: 6148965/* ... */;React;
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.