Map View

The Map view presents a list of upcoming events and Google Maps to show or edit the event's location or to set the location for new events.

Related sample:  Map view

By default, the left list of the view displays events beginning from the current date. To change such behavior, use the map_start, map_end properties.

Initialization

To use Google Maps, you need to add your own google API key on your page.

To add the Map view to the scheduler, follow these steps:

1. Include the Map view and Google Maps code files on the page:

<-- use your own Google API key-->
<script src="//maps.google.com/maps/api/js?key=[your Google API key]&sensor=false" 
    type="text/javascript"></script>`
 
<script src="../codebase/ext/dhtmlxscheduler_map_view.js"></script>

2. Add the view's tab to the scheduler's markup:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="map_tab" style="right:280px;"></div>
    </div>
    ... 
</div>

3. Set the label for the tab:

//'map_tab' is the name of our div
scheduler.locale.labels.map_tab = "Map";

4. Define an additional section in the lightbox to manage the event location:

scheduler.config.lightbox.sections=[
    {name:"description", height:50,map_to:"text", type:"textarea", focus:true},
    {name:"location", height:43, map_to:"event_location", type:"textarea"},
    {name:"time", height:72, type:"time", map_to:"auto"}    
]

5. Set the label for the section:

scheduler.locale.labels.section_location = "Location";

6. Initialize the scheduler:

//'map' is the default name of the Map view
scheduler.init('scheduler_here',new Date(2013,8,1),"map");

Related sample:  Map view

Requirements to data items

To be correctly rendered on the Map view, data items must contain a number of additional properties. The final list of mandatory properties (that data items should have) looks as in:

  • start_date (Date or string) - the date when the event is scheduled to begin. The default format - '%m/%d/%Y %H:%i'.
  • end_date (Date or string) - the date when the event is scheduled to be completed. The default format - '%m/%d/%Y %H:%i'.
  • text (string) - the event's text.
  • location - (string) the location of an event.
  • lat - (number) the latitude of the event's location.
  • lng - (number) the longitude of the event's location.

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

GUI details

  • Selected events are highlighted. If the selected event occupies several days, all related records are highlighted.
  • To create a new event - double click on an empty cell in the list or on the desired location on the map.
  • To edit or delete an event - double click on the 'details' icon on the left side of the event's description.
  • To overview event - click on the event's marker on the map.

Localization tips

The Map view has 4 labels defined in the locale:

  • scheduler.locale.labels.{mapName}_tab - the name of the map's tab
  • scheduler.locale.labels.section_{sectionName} - the section label in the lightbox
  • scheduler.locale.labels.marker_geo_success - the text in the marker's tooltip in case of successful geolocation response
  • scheduler.locale.labels.marker_geo_fail - the text in the marker's tooltip in case of unsuccessful geolocation response

The 2 first labels are commonly specified, while adding the view tab to the scheduler, but the remaining marker labels should be redefined, only if you localize the application to a language, different from English.

Map-related configuration options

scheduler.config object

  • map_end - sets the date to display events until
  • map_error_position - sets the position that will be displayed on the map, in case the event location can't be identified
  • map_infowindow_max_width - the maximum width of the google maps's popup marker in the map view
  • map_initial_position - sets the initial position of the map
  • map_initial_zoom - sets the initial zoom of google maps in the map view
  • map_resolve_event_location - activates attempts to resolve the event's location, if the database doesn't have the event's coordinates stored
  • map_resolve_user_location - enables/disables prompts, asking the user to share his location for displaying on the map
  • map_start - sets the date to start displaying events from
  • map_type - sets the type of google maps
  • map_zoom_after_resolve - sets the zoom that will be used to show the user's location, if the user agrees to the browser's offer to show it

scheduler.xy object

scheduler.xy.map_date_width - the width of the date column
scheduler.xy.map_description_width - the width of the description column

Related guides

Back to top