Map

How to setup your map.

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Map

Adding a map in Lambda is pretty easy. What you need to do is add this markup wherever you want in your markup

<div class="google-map" id="map" style="height:354px;" ></div>

You can adjust the height to your needs.

The map's settings can be added/changed as a script at the bottom of the body, along with the rest of the javascript imports.

<script>window.map = {
map_type: 'ROADMAP',
map_zoom: 15,
map_style: 'blackwhite',
map_scrollable: 'on',
marker: 'show',
label: ['London Royal','Athens Bistro'],
address: '',
latlng : ['51.511084, -0.133202','51.506623, -0.111916'],
center_latlng: '',
markerURL: 'assets/images/marker.png',
auto_center: true,
};</script>
  1. map_type : ROADMAP, SATELLITE, TERRAIN or HYBRID.
  2. map_zoom : the amount of zoom that you wish to have (1-20)
  3. map_style : blackwhite or regular
  4. map_scrollable : on or off for the map to be scrollable.
  5. marker : show or hide.
  6. label : Set the text that will show as the markers label. If multiple markers are added, make sure that you have set the same number of labels as well.
  7. address : Set the addresses of the map's markers. Be careful of the syntax that is being used here. It has to be an arrayof comma-separated single quotes. Inside the quotes put the addresses separated by comma. Leave empty if you wan t to use lat/lng. Example for 3 addresses ['address 15 New York','address 22 New Orleans','address 3 Amsterdam']
  8. latlng : Set the latitude and longitude of the map's location. Be careful of the syntax that is being used here. It has to be an arrayof comma-separated single quotes. Inside the quotes put the latitude and longitude separated by comma. Example for 3 markers ['lat1, lng1','lat2, lng2','lat3, lng3']
  9. center_latlng : Set the lat/lng according to which you want the map to be centered at.
  10. markerURL : Set the URL of the marker's icon.
  11. auto_center : Set to trueif you want the map to be centered automatically, fitting all the markers that you have inserted.
Keep in mind that you need to include the <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> and <script src="assets/js/map.min.js"></script> at the end of the <body>.

contact-form