Find more Examples here

Fit Map Bounds (Map-API)

Version reduced to minimal set of HTML Read Example Description


The GeomLayer adds a set of tours and POIs to the map without clustering. It is used to build maps to show a tour and its POIs or small result sets on a map and to use the 3d flight.

This examples shows how to the GeomLayer may be used to calculate the map extent of the result set before the map is instantiated to start with the right map center and zoom:

// initialize map and set callback function
oax.api.maps( initOA );

// called as soon as the map api is loaded and ready for use
// oamaps: Outdooractive JavaScript API
// gm:     Basic Map API
function initOA( oamaps, gm ) {

    // choose layer content
    var idlist = [
	// some tours
	'1397449', '5345254',
	// some pois
	'1751108', '1336336', '1324291'

    // layer configuration

    var layerConfig = {

        // make sure that `layer.getBounds()` will use tours *and* POIs.
        fitPoiBounds  : true,
        fitTourBounds : true,

        // make all markers clickable
	markersActive : true,

        // show tour geometry on marker mouse over
	mouseoverTourGeom : true,

        // activate outdooractive default info windows for all markers
	defaultIW : true

    // instantiate layer
    layer = new oamaps.GeomLayer( idlist, layerConfig );

    // wait until layer loaded object data (async) and call initMap function then
    layer.whenLoaded( initMap );

    // init map and add layer to the map
    function initMap() {

        // we can ask layer for bounds now as layer data was already loaded
        var bounds = layer.getBounds();

        var mapId = "map_canvas";
        var mapDiv = document.getElementById( mapId );
        var mapTypeIds = ['oa_map', 'oa_topo', 'oa_map_winter'];

        var mapConfig = {

            // outdooractive API feature: just give `bounds` (instead of: `zoom`,`center`)
            bounds : bounds,

            mapTypeId : mapTypeIds[ 0 ],
            mapTypeControlOptions : { mapTypeIds: mapTypeIds }

        // instantiate and show the map
        var map = mapDiv, mapConfig );

        // add GeomLayer to the map
        layer.setMap( map );