<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(){
$("#"+cMap.getDivId()).append('<input placeholder="Address or lat,lng" type="text" id="txtPanZoomTo" style="position:absolute;top:0px;left:0px;height: 20px;width: 150px;background-color:#FFFFFF;opacity: .9;"></input>');
$("#"+cMap.getDivId()).append('<button id="btnPanZoomTo" style="position:absolute;top:0px;left:150px;height: 25px;width: 35px;background-color:#FFFF00;border-style: none;opacity: .9;">GO</button>');
$("#btnPanZoomTo").click(
function(){
cMap.panZoomTo($("#txtPanZoomTo").val());
}
);
}
//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.