<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();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
  2. https://api.cmapsanalytics.net/mapview?version=4