Check with your designers to help you design this section
Check with your designers to help you design this section
In addition to RAUL-specific instruction found here, more information is available from Google Maps at: https://developers.google.com/maps/documentation/javascript/tutorial .
Google Maps plugin is not included in raul.js file. You will have to add it separately if you want to use it. Below you can see an example of how to include Google Maps to your project.
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/raul.min.css"
rel="stylesheet"
/>
<!-- Add the plugin after raul -->
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/plugins/raul-plugin-google-maps.min.css"
rel="stylesheet"
/>
<!-- Code on page -->
<!-- Add Map Dependency Script -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<!-- Add Marker Clustering Dependency -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://cdn.realpage.com/raul/v2.78.3/js/raul.min.gz.js"></script>
<!-- Add the plugin after raul -->
<script src="https://cdn.realpage.com/raul/v2.78.3/js/plugins/raul-plugin-google-maps.min.js"></script>
The google maps plugin for RAUL is a series of style wrappers and helper functions. The goal is to provide shallow wrappers taht one can use as helpers to style their project. We have intentionally omitted complex abstractions in order to be able to facilitate a way of working with the already provided APIs from google, while integrating with our design and style choices.
To start working with the maps plugin, you follow the standard Google Maps JavaScript API. First adding the HTML element which will house the map:
<div id="map" style="height: 500px;"></div>
The following is code from the example Map on this page, and shows the use of all hepers:
var mapHelpers = RAUL.plugins.maps.google
var locations = [
{lat: 39.463276, lng: -116.563480, info: 'This is info window 1'},
{lat: 39.718234, lng: -110.363181, info: 'This is info window 2'},
{lat: 38.727111, lng: -110.371124, info: 'This is info window 3'},
{lat: 43.848588, lng: -111.209834, info: 'This is info window 4'},
{lat: 43.851702, lng: -111.216968, info: 'This is info window 5'},
{lat: 44.671264, lng: -100.863657, info: 'This is info window 6'},
{lat: 45.304724, lng: -118.662905, info: 'This is info window 7'},
{lat: 46.817685, lng: -115.699196, info: 'This is info window 8'},
{lat: 46.828611, lng: -115.790222, info: 'This is info window 9'},
{lat: 47.750000, lng: -115.116667, info: 'This is info window 10'},
{lat: 40.759859, lng: -115.128708, info: 'This is info window 11'},
{lat: 42.765015, lng: -115.133858, info: 'This is info window 12'},
{
lat: 41.770104,
lng: -105.143299,
info: '<h2>Custom InfoBox</h2><p>This is info window 13</p>'
},
{lat: 39.773700, lng: -115.145187, info: 'This is info window 14'},
{lat: 37.774785, lng: -115.137978, info: 'This is info window 15'},
{lat: 37.819616, lng: -104.968119, info: 'This is info window 16'},
{lat: 38.330766, lng: -114.695692, info: 'This is info window 17'},
{lat: 39.927193, lng: -115.053218, info: 'This is info window 18'},
{lat: 41.330162, lng: -114.865694, info: 'This is info window 19'},
{lat: 42.734358, lng: -117.439506, info: 'This is info window 20'},
]
var map = new window.google.maps.Map(
document.getElementById('map'),
{
center: mapHelpers.averageLatLng(locations),
zoom: 5,
}
)
var markers = locations.map(function(location, i) {
const marker = mapHelpers.createMarker({
map: map,
lat: location.lat,
lng: location.lng,
info: '<div class="p-3">' + location.info + '</div>',
zIndex: i,
})
RAUL.plugins.maps.google.InfoBox.fromMarker(marker)
return marker
})
mapHelpers.createMarkerClusterer({map: map, markers: markers})
The following are the available helpers and how to use them.
InfoBox
is an extension of the google.maps.OverlayView class
.
It is added to the floatPane
on the map. It is intended to replace and emulate
google.maps.InfoWindow
, and add extensibility at the same time.
There are two approaches to creating an InfoBox
. The first
var location = { lat: 42.765015, lng: -115.133858 };
var info = 'Custom text';
var map = new window.google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 5,
})
var marker = RAUL.plugins.maps.google.createMarker({
map: map,
lat: location.lat,
lng: location.lng,
info: info,
zIndex: i,
})
// Simply build from marker
var infoBox = RAUL.plugins.maps.google.InfoBox.fromMarker(marker)
// or use constructor for flexibility
// var infoBox = new RAUL.plugins.maps.google.InfoBox(map, marker, info)
This method is helpful when determining the centerpoint of you markers. It takes in an array of LatLng objects or Lat/Lng object literals. It returns a Lat/Lng object literal.
var map = new window.google.maps.Map(
document.getElementById('map'),
{
center: RAUL.plugins.maps.google.averageLatLng.averageLatLng(locations),
zoom: 5,
}
)
Creates and returns google Marker objects based on options and provided defaults.
map
{object} - Should be the map object instance.
lat
{number} - Sets the lat coordinate of the marker.
lng
{number} - Sets the lng coordinate of the marker.
label
{string || null} (default value is null)
- Changes marker icon and adds a label with the
label
's value inside. This could be used to show the index of the marker.
If no value is set marker will use the default icon.
info
{string || null} (default value is null)
- info
's value will be added to the marker's info box.
If no value is set the info box will not be opened for the associated marker.
zIndex
{number || null} (default value is null) -
Places markers on top of others if value is higher.
RAUL.plugins.maps.google.createMarker({
map: map,
lat: location.lat,
lng: location.lng,
info: location.info,
zIndex: i,
})
Creates MarkerClusterer if you chose to use itthe additional dependency. By default it uses the styled icons based on RAUL design. You can override all options by providing a key named options.
map
{object} - Should be the map object instance.
markers
{Array} - Should be an array of markers instances.
options
{object} (optional)
- Marker clusterer options.
RAUL.plugins.maps.google.createMarkerClusterer({map: map, markers: markers})