<div id="mapDiv"></div>
#mapDiv {
height:100%;
width:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
var cMap;
function buildMap(){
cMap = new centigon.locationIntelligence.MapView();
cMap.onMapReady = function(){
var trvlOpt = new centigon.mapping.TravelOptions();
trvlOpt.travelMode = "driving";
trvlOpt.useCurrentLocationAsStartPoint = false;
cMap.layerNames(["Drive Time Markers Layer"]);
cMap.useDynamicZoom(true);
cMap.travelOptions([trvlOpt]);
cMap.layerTypes([centigon.mapping.Layer.TYPE.DRIVE_TIME_MARKERS]);
cMap.alertEnabled([true]);
cMap.alertColors([["#00ff00", "#ffff00", "#ff0000"]]);
cMap.mapAlertTypes(["type-choropleth"]);
cMap.locations([["32.71119959,-117.10787645", "32.71119959,-116.10787645", "33.81119959,-117.50787645", "33.0838130,-117.2503880"]]);
}
//ENTER YOUR KEY
cMap.key('enter_your_own_key_d8d37yxn');
cMap.sslEnabled(true);
};
//WHEN DOCUMENT LOADED INITIALIZE THE MAP
$(document).ready(function(){
// CALL THE FUNCTION
buildMap();
});
This Pen doesn't use any external CSS resources.