Hi,
I want to use the grid on google maps and I created custom control and when I try to use grid it doesn't work. I also don't get any errors on my console.
Kendo grid doesn't show in #routeGrid
and my script is as follow;
var map = null;
function CenterControl2(controlDiv, map) {
// Custom Control
var controlUI = document.createElement('div');
controlUI.style.marginTop = '15px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
//controlUI.style.backgroundColor = 'white';
controlUI.className = 'col-xs-12 col-sm-12 col-md-12 col-lg-12';
controlUI.title = 'Please click to see';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.innerHTML = '<div id="routeGrid"></div>';
controlUI.appendChild(controlText);
}
function initialize() {
if (map == null) {
var mapTypeIds = [];
for (var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push("OSM");
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(36.1447400, -5.3525700),
gestureHandling: 'cooperative',
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
zoomControl: true,
mapTypeControl: false,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: mapTypeIds
}
});
//Custom Control
var centerControlDiv = document.createElement('div');
centerControlDiv.id = 'shipmapdiv';
var centerControl = new CenterControl2(centerControlDiv, map);
centerControlDiv.index = 1;
centerControlDiv.style.zIndex = '3';
map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);
var maptiler = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe + x;
}
// See above example if you need smooth wrapping at 180th meridian
return "http://tiles.openseamap.org/seamark/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
isPng: true,
maxZoom: 18,
opacity: 1
});
map.overlayMapTypes.insertAt(0, maptiler);
google.maps.event.trigger(map, 'resize');
google.maps.event.addListener(map, 'tilesloaded', function () {
var mapDiv = document.getElementById("map");
if (mapDiv.style.visibility != "visible")
mapDiv.style.visibility = "visible";
});
}
}
var rg = null;
rg = $("#routeList").kendoGrid({
dataSource: {
//data: [{ r_Id: null, PortName: null, Type: null, Distance: null, SecaDistance: null, SeaTime: null, PortTime: null, ManoTime: null, OrderNo: 0, Port: { PortName :null} }],
type: "json",
change: function (e) {
if (e.items.length > 0) {
if (e.action == "remove") {
PortRemove(e.items[0]);
}
else if (e.action == "itemchange") {
if (e.field == "port") {
var message = e.items[0].PortName;
if (e.items[0].port != undefined) {
e.items[0].PortName = e.items[0].port.PortName;
e.items[0].isSECA = e.items[0].port.isSECA;
var myLatLng = { lat: e.items[0].port.LatDec, lng: e.items[0].port.LonDec };
if (e.items[0].marker != null)
e.items[0].marker.setMap(null);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: e.items[0].port.PortName,
portInfo: e.items[0]
});
PortAdd(marker);
}
}
}
}
},
schema: {
data: "data",
model: {
fields: {
r_Id: { type: "number" },
PortName: { type: "string" },
isSECA: { type: "boolean" },
Type: { type: "string" },
Distance: { type: "number", editable: false },
SecaDistance: { type: "number" },
Speed: { type: "number" },
SeaTime: { type: "number", editable: false },
PortTime: { type: "number" },
ManoTime: { type: "number" },
OrderNo: { type: "number", editable: true }
}
}
},
pageSize: 10
},
height: 350,
selectable: "row",
toolbar: ["create", "save"],
groupable: false,
sortable: true,
//change: onChange,
edit: onLegAdd,
remove: onLegRemove,
editable: { createAt: "bottom", mode: "inline" },
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "r_Id",
hidden: true
},
{
command: ["edit", "destroy"], title: " ", width: "180px", locked: true, lockable: false
},
{
field: "port",
title: "Port",
editor: PortDropdown,
template: '#:PortName #',
// template: "#= (data.description ? data.description.name : '') #",
width: 210,
hidden: false,
},
{
field: "Type",
width: 120,
title: "Type",
defaultValue: "Load",
editor: TypeDropdown
},
{
//field: "IsSECA",
width: 100,
title: "SECA?",
//defaultValue: false,
template: '<input type="checkbox" #= isSECA ? \'checked="checked"\' : "" # class="chkbx" />'
},
{
field: "Speed",
width: 100,
title: "Speed"
},
{
field: "Distance",
width: 120,
title: "Distance"
},
{
field: "SecaDistance",
width: 120,
title: "SECA Distance"
},
{
field: "SeaTime",
width: 120,
title: "Sea Time"
},
{
field: "PortTime",
width: 120,
title: "Port Time"
},
{
field: "ManoTime",
width: 120,
title: "Mano. Time"
},
{
field: "OrderNo",
width: 120,
title: "No",
hidden: true
}]
});