Find more Examples here

Objects on a Map (Map-API)

Version reduced to minimal set of HTML Read Example Description

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, small result sets and the 3d flight.

// function initOA is called as soon as Outdooractive JavaScript API is ready
oa.api.maps( initOA );

function initOA( oamaps, gm ) {

    // create configuration objects
    var layerConfig, content, detailPageEvent;
    initConfig();

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

    // add listener to open detail page
    var h = layer.listen( detailPageEvent, openDetailPage );

    layer.whenLoaded( initMap );

    function initMap() {

        var bounds = layer.getBounds();

        if (oa.PREFIX=='oax') {
            mapConfig.bounds = layer.getBounds();
        } else {
            mapConfig.center = layer.getBounds().center;
            mapConfig.zoom   = 11;
        }

        // instantiate map
        map =  oamaps.map( mapDiv, mapConfig );

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

    }

    // all configuration attributes are set here
    function initConfig() {

        // map container
        mapDiv = document.getElementById( "map_canvas" );

        // map config
        mapConfig = { 

            mapTypeId: 'oa_map',
            mapTypeControlOptions : { mapTypeIds: ['oa_map', 'oa_topo', 'oa_map_winter'] }

        };

        // only oax allows GeomLayer configuration attributes
        if (oa.PREFIX === 'oax') {

            layerConfig = {

                fitPoiBounds: true,
                markersActive: true,
                defaultIW: true

            };

        }

        // add some tours to array of object ids
        // oam is restricted to one object right now
        content = (oa.PREFIX === 'oax') ? 
            [

                '1397449', '5345254', // some tours
                '1336336', '1324291'  // some pois

            ] : '1336336';

        // event to open detail page:
        // oax: info window click
        // oam: marker click
        detailPageEvent = (oa.PREFIX === 'oax') ? 'iwSelect' : 'markerClick';

    }

}

function openDetailPage( obj ) {
    return window.location = "../../FlexView-API/FlexView.DetailPage.html?id=" + obj.id;
}