Find more Examples here

A simple Map (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

All you need to integrate one of the several outdooractive maps or thematic layers is to integrate a map on your page.

First add a div container with a dom id (set to “map_canvas” in this example) to your page:

<div id="map_canvas" style="width: 100%; height: 600px;"></div>

Then initialize the Outdooractive Map API by calling the method oax.api.maps() during page load:

var map;

// call the outdooractive maps api initialization method with a callback function
oa.api.maps(
    function (oamaps, gm) {

	// list all outdooractive maps you want to enable
	var mapTypeIds = [
	    'oa_map',
	    'oa_map_winter',
	    'oa_osm'
	];

        

	// set map center, zoom level, map types and more
	var config = {
            center : new gm.LatLng( 47.54687, 10.2928 ),
            zoom : 10,
            mapTypeId : mapTypeIds[ 0 ],
            mapTypeControlOptions : { mapTypeIds: mapTypeIds }
        };

	// instatiate a new outdooractive map
	// params: dom id of map canvas div, configuration object
	map = oamaps.map( document.getElementById("map_canvas"), config );
});

The Outdooractive Maps API may be loaded asynchronously after page load or on user interaction. The Asynchronous Loading Example shows how this is done.

Additional information

Map Types

The complete list of available outdooractive and google map types

MapTypeId Name area
'oa_map' outdooractive summer map de, at, sui, (it)
'oa_map_winter' outdooractive winter map de, at, sui, (it)
'oa_hybrid' outdooractive map on top of Google Earth satellite images de, at, sui, (it)
'oa_osm' openstreetmap - outdooractive summer style world
'oa_osm_winter' openstreetmap - outdooractive winter style world
gm.MapTypeId.ROADMAP Google Maps road map world
gm.MapTypeId.SATELLITE Google Earth satellite images world
gm.MapTypeId.HYBRID Google Maps map on top of Google Earth satellite images world
gm.MapTypeId.TERRAIN Google Maps physical Map world