Map view

The view contains Google Map and allows to display events location on it.

Related sample: samples/03_extensions/19_map_view.html

Steps to enable

  • include
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script src="../../codebase/ext/dhtmlxscheduler_map_view.js" type="text/javascript" charset="utf-8"></script>
  • add to the template
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
    <div class="dhx_cal_navline">
    ...
        <div class="dhx_cal_tab" name="map_tab" style="right:280px;"></div>

GUI details

To edit: click on the 'details' icon at the left of event description (if readonly mode is not enabled).
To create: double click on the empty cell or on the desired location on the map.
To overview: click on the event icon on the map.

Customization options

  • first column, event's date, uses scheduler.templates.map_time template
scheduler.templates.map_time = function(start,end,event){
       return scheduler.templates.day_date(start)+" &ndash; "+scheduler.templates.day_date(end);
}
  • second column, event's text, uses scheduler.templates.map_text template
scheduler.templates.map_text = function(event){
	return event.text;
}

Both templates can be redefined to ouput data or text in a custom format.

Data requirements

In order that the app runs correctly, your database must include the columns for the following information:

  • the location of an event
  • the latitude of an event location
  • the longitude of an event location

If you don't have such columns, create them, for example, with names: 'location', 'lat' and 'lng'.

 
Make sure that your .php file conform to your database data.

Configuring map

  • Date column width {integer}
scheduler.xy.map_date_width = 188
  • Description column width {integer}
scheduler.xy.map_description_width = 400;
  • If the locations of events have no latitude and longitude values in the database, you can activate the following option and the coordinates will be defined automatically during event loading {boolean}
scheduler.config.map_resolve_event_location = true;
  • Initial position of the map {object}
    • lat - latitude position
    • lng - longitude position
scheduler.config.map_initial_position = new google.maps.LatLng(lat, lng);
  • You can also set the map position in case of the event hasn't got associated coordinates (lookup query returns nothing) {object}
scheduler.config.map_error_position = new google.maps.LatLng(lat, lng);
  • Maximum width of the info window (marker's tooltip) on the map {integer}
scheduler.config.map_infowindow_max_width = 300;
  • Map type {takes one of the predifened values}
    • HYBRID - displays a transparent layer of major streets on satellite images.
    • ROADMAP - displays a normal street map.
    • SATELLITE - displays satellite images.
    • TERRAIN - displays maps with physical features such as terrain and vegetation.
scheduler.config.map_type = google.maps.MapTypeId.ROADMAP;
  • Initial zoom {integer}
scheduler.config.map_inital_zoom = 1;
  • Some browsers open up the opportunity to determine your location. And if you add this codeline, such opportunity will be offered during map loading {boolean}
scheduler.config.map_resolve_user_location = true;
  • Zoom that will be used to show your location if you agree to a browser offer to show it {boolean}
scheduler.config.map_zoom_after_resolve = 15;
  • Template that is used to set date format in information window on the map
scheduler.templates.marker_date=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
  • Template that is used to set text in the information window on the map
scheduler.templates.marker_text=function(start, end, event){
	return "<div><b>"+event.text+"</b><br/><br/>"+event.event_location+"<br/><br/>"+scheduler.templates.marker_date(start)+" - "+scheduler.templates.marker_date(end)+"</div>";
}

Localization

Extension adds 4 new labels , which may be added to locale

scheduler.locale.labels.map_tab = "Map"; // name of the map tab
scheduler.locale.labels.section_location = "Location"; // name of the location section in lightbox
scheduler.locale.labels.marker_geo_success = "It seems you are here."; // message in info window in case of successful geolocation response
scheduler.locale.labels.marker_geo_fail = "Sorry, could not get your position using geolocation."; // message in info window in case of unsuccessful geolocation response