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 Google Maps code file 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>

2. Activate the Map view extension:

scheduler.plugins({
    map_view: true
});

3. 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>

4. Set the label for the tab:

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

5. 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"}    
]

6. Set the label for the section:

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

7. Initialize the scheduler:

//'map' is the default name of the Map view
scheduler.init('scheduler_here',new Date(2019,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 - '%Y-%m-%d %H:%i'.
end_date (Date or string) - the date when the event is scheduled to be completed. The default format - '%Y-%m-%d %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

Customizing markers

Starting from v7.0 you can customize the shape of markers by redefining the createMarker() method of the Map View:

const { AdvancedMarkerElement, 
    PinElement } = await google.maps.importLibrary("marker");
scheduler.ext.mapView.createMarker = function(config){
    const pinViewGlyph = new PinElement({
        glyphColor: "white",
    });
    return new AdvancedMarkerElement({
        ...config,
        content: pinViewGlyph.element,
    });
};

You can find more information in the Google Maps documentation.