Find more Examples here

Custom Info Window (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

The outdooractive API ClusterLayer, FilterClusterLayer and GeomLayer offer a comfortable way to implement custom infowindows. You just have to implement a callback function that has access to the data of the OOI which was clicked.

oax.api.maps( initOAX );

function initOAX(oamaps, gm) {

    var content = [
        // some tours
        '1397449', '5345254',
        // some pois
        '1303417', '1336336', '1324291'
    ];

    var layerConfig = {

        // all marker have a click event
        markersActive : true,

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

        // center and pan map to fit to the bounds of all objects (including tour start points)
        fitPoiBounds : true,

        // don't use default info windows
        defaultIW : false,

        // use custom infowindows instead
        customIW : {

            // some HTML that is shown while loading
            loadingHTML : "Loading ... ",

            // function called as soon as a marker is clicked
            // returns info window html content
            // the object ooi holds all information like ooi title, descriptions and images
            render : function ( ooi ) {

                return "<b>" + ooi.title + "</b>";

            }

        }


    };

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

    layer.whenLoaded( initMap );

    function initMap() {

        var mapDiv = document.getElementById( "map_canvas" );

        var mapTypeIds = ['oa_map', 'oa_hybrid', gm.MapTypeId.SATELLITE, 'oa_map_winter', gm.MapTypeId.TERRAIN];

        var mapConfig = {
            center : new gm.LatLng( 47.54687, 10.2928 ),
            zoom : 10,
            mapTypeId : mapTypeIds[ 0 ],
            mapTypeControlOptions : { mapTypeIds: mapTypeIds }
        };

        var map = oamaps.map( mapDiv, mapConfig );

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