We Keep Coding

google map showing cant load maps correctly in html

i have a map section in html and javascript, the section is like below:
CustomMarker.prototype = new google.maps.OverlayView();
function CustomMarker(opts) {
this.setValues(opts);
}
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = $('' +
'<div>' +
'<div class="shadow"></div>' +
'<div class="pulse"></div>' +
'<div class="pin-wrap">' +
'<div class="pin"></div>' +
'</div>' +
'</div>' +
'')[0];
this.pinWrap = this.div.getElementsByClassName('pin-wrap');
this.pin = this.div.getElementsByClassName('pin');
this.pinShadow = this.div.getElementsByClassName('shadow');
div.style.position = 'absolute';
div.style.cursor = 'pointer';
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click", event);
});
}
var point = this.getProjection().fromLatLngToDivPixel(this.position);
if (point) {
div.style.left = point.x + 'px';
div.style.top = point.y + 'px';
}
};
CustomMarker.prototype.animateDrop = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
'opacity': '1',
});
dynamics.animate(this.pinWrap, {
translateY: 0,
scaleY: 1.0,
}, {
type: dynamics.gravity,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 1800,
bounciness: 600,
})
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'scale(0,0)',
});
dynamics.animate(this.pinShadow, {
scale: 1,
}, {
type: dynamics.gravity,
duration: 1800,
});
}
CustomMarker.prototype.animateBounce = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
translateY: -30
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 0,
});
dynamics.animate(this.pin, {
scaleY: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 600,
delay: 650,
});
dynamics.stop(this.pinShadow);
dynamics.css(this.pinShadow, {
'transform': 'none',
});
dynamics.animate(this.pinShadow, {
scale: 0.6,
}, {
type: dynamics.forceWithGravity,
bounciness: 0,
duration: 500,
delay: 150,
});
}
CustomMarker.prototype.animateWobble = function() {
dynamics.stop(this.pinWrap);
dynamics.css(this.pinWrap, {
'transform': 'none',
});
dynamics.animate(this.pinWrap, {
rotateZ: -45,
}, {
type: dynamics.bounce,
duration: 1800,
});
dynamics.stop(this.pin);
dynamics.css(this.pin, {
'transform': 'none',
});
dynamics.animate(this.pin, {
scaleX: 0.8
}, {
type: dynamics.bounce,
duration: 800,
bounciness: 1800,
});
}
$(function() {
var pos = new google.maps.LatLng(17.402507, 78.484450);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: pos,
disableDefaultUI: true,
});
var marker = new CustomMarker({
position: pos,
map: map,
});
google.maps.event.addListener(marker, 'click', function(e) {
marker.animateWobble();
});
$('#drop').on('click', function(e) {
marker.animateDrop();
});
$('#wobble').on('click', function(e) {
marker.animateWobble();
});
$('#bounce').on('click', function(e) {
marker.animateBounce();
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Raleway:600,900,400|Roboto:300,700' rel='stylesheet'>
<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15228.829609290426!2d78.46827062015056!3d17.401831576090753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9900853b7663%3A0xff5ff705a04cebb!2sBook%20The%20Party!5e0!3m2!1sen!2sin!4v1597715101831!5m2!1sen!2sin"
width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
I added my latitude and longitude inside the javascript, but its not properly loading, its still showing maps not loaded correctly. as i am new to this, I searched on google and saw I need to add API key on this, but where do I add API key in this code, please anyone help. thanks in advance

Try to change this line:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
to this:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=YOUR_API_KEY" type="text/javascript"></script>

Kendo Grid edit cell from button inside the cell

My problem is the following:
I've added to a grid row edit buttons as templates.
Now what i want to do is to allow editing of the cell text when i click the "edit button" inside that cell.
Does anyone has any idea how can i acive this ? How can i enable the edit of the cell in which the button is ?
Adding the template:
template:
"#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span> <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
#}\
Here is what i've tried
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
console.log("button clicked");
});
If anyone has any idea that would be great. I'm sorry if the post already exists but i couldn't find any answers on this. If there are please point me to them.

You almost got it. To use editCell() you need to pass the td element to it. You are passing the button.
Just change this...
var cell = $(cellElement);
To this...
var cell = $(cellElement).closest("td");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script>
$(function() {
let grid = $("#grid").kendoGrid({
dataSource: {
data: [{ A: 1, B: 2, C: 2}]
},
columns: [{
field: "A",
template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "B",
template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "C",
template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
}],
editable: true
}).data("kendoGrid");
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement).closest("td");
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo

With kendo grid for jquery, something like this worked for me
$("#grid").kendoGrid({
editable: "incell",
scrollable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
previousNext: true,
responsive: false
},
noRecords: {
template: "<div class='container'>" + "<div class='row mb-3 '>" + "<div class='col-5 mx-auto'>" + "<div class='d-flex flex-column'>" +
"<img class='w-50 mt-3 align-self-center' src='/Content/EbizAssets/No-Invocies-Found.svg'>" +
"<span><strong>No invoices found.</strong></span>" +
"</div>" + "</div>" + "</div>" + "</div>"
},
columns: [
{
selectable: true
},
{
field: "CustomerName",
title: "Customer Name",
editable: true
},
{
field: "AmountDue",
title: "Amount Due",
template:
"<span>$#= parseFloat(data.AmountDue).toFixed(2) #<span>" +
"<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-so' />",
width: 200,
format: "{0:c2}",
/*editable: true*/
},
{
field: "EmailAddress",
title: "Email Address",
width: 260,
editable: false,
template: "#= EmailAddress #<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-ea' />"
},
],
selectable: "multiple, row",
}).data("kendoGrid");
}
});
});
} },

Issue generating dynamically a popup in jQuery mobile

I'm trying to dynamically generate a popup in mobile app I'm working on, but I'm experiencing an issue that I can figure out. I added a control-group with a couple of buttons, but the buttons are added twice (see image below). I'm sure it is very simple, but I can't see it. What am I missing here. Thansk!
This is the jQuery code:
var $popUp = $("<div><div/>").popup({
dismissible: false,
theme: "a",
overlyaTheme: "a",
transition: "pop",
positionTo: "window"
}).on("popupafterclose", function () {
//remove the popup when closing
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$("<h2/>", {
text: "Location Details"
}).appendTo($popUp);
$("<label/>", {
text: "Location: " + locationName
}).appendTo($popUp);
$("<label/>", {
text: "Note:"
}).appendTo($popUp);
$("<p/>", {
text: locationNote
}).appendTo($popUp);
$("<div data-role='controlgroup' data-type='horizontal' class='myGroup'/>").trigger("create").appendTo($popUp);
$("<a>", {
text: "Submit"
}).buttonMarkup({
inline: false,
mini: true,
icon: "check",
}).on("click", function () {
$popUp.popup("close");
}).appendTo('.myGroup');
$("<a>", {
text: "Back",
"data-rel": "back"
}).buttonMarkup({
inline: false,
mini: true,
theme: "e",
icon: "back",
}).appendTo('.myGroup');
$popUp.popup('open').trigger("create");

I ended up doing it using grids instead of controlgroup, for my purpose it work just fine:
var $popUp = $("<div><div/>").popup({dismissible: false, theme: "a", overlyaTheme: "a", transition: "pop",positionTo: "window"
}).on("popupafterclose", function () {
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$('<div class="ui-grid-a"><div class="ui-grid-solo"><div class="ui-block-a"> <h2>' + locationName + '</h2><label>Note: </label><textarea disabled="disabled">' + itemClickedNote + '</textarea></div></div>').appendTo($popUp);
$('<div class="ui-block-a" style="width:48%"><a data-icon="back" data-rel="back" data-role="button" class="ui-mini">Cancel</a>').on("click", function () {
$popUp.popup("close");
}).appendTo($popUp);
$('</div>').appendTo($popUp);
$('<div class="ui-block-b" style="width:48%; float:right"><a data- icon="plus" id="addLocationsBtn" data-role="button" class="ui- mini">Submit</a>').appendTo($popUp);
$('</div> </div>').appendTo($popUp);
$popUp.popup('open').trigger("create");

How do you count characters of a textarea within a dialog?

I have the following code:
<script type="text/javascript">
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea></div>"
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea [name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
</script>
How do i incorporate a character count with max 255 characters for the textarea within the dialog box?
I've looked around for code but placing it within the function createDialog won't work and getting length variable doesn't work either when putting it inside the dialog.

Change your dialog to include a DIV for the count:
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea><div>Characters: <span class='charcount'>0</span></div></div>"
Then add the following JS:
$(document).on("keyup edit paste", ".dialog .texbox", function(e) {
var charcount = $(this).val().length;
if (charcount > 255) {
e.preventDefault();
return;
}
$(this).closest(".dialog").find(".charcount").text(charcount);
});
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text' placeholder='"+text+"'></textarea><div>Characters: <span class='charcount'>0</span></div></div>")
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea[name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
$("#button").click(function() {
createDialog("This is a message", "foo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="button">Show dialog</button>
<input id="foo"/>

You would want to use delegation for this. You could do something like this:
$(document).on('input propertychange', '#textarea', function() {
var text = $('#textarea').val();
if (text.length > 255) {
$('#textarea').val(text.substring(0,255));
}
//Maybe some code to display a message to the user, or update a character count element or something?
});

Jquery Extend DialogBox is distorted in IE

I am using jQuery Extend dialog box in my application it working fine in Chrome as well as IE but from the server has not working for IE
I have included the following libraries
<script src="/CLG/JavaScript/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="/CLG/JavaScript/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<link href="/CLG/Stylesheets/jquery/jquery-ui.css" rel="stylesheet" />
<script src="/CLG/JavaScript/jquery-ui.js"></script>
<script src="/CLG/JavaScript/jquery.dialogextend.js"></script>
And Please find the below function from where dialog Box is opening
function ShowNewDialogv1(URL, Style,width) {
var hostname = document.domain;
var dialogOptions = {
"open": function () {
},
"close": function () {
},
"title": Style,
// "width": 400,
// "height": 300,
"modal": true,
"resizable": false,
"draggable": true
//"close": function () { }
};
var dialogExtendOptions = {
"closable": true,
"maximizable": true,
"minimizable": true,
"collapsable": true
};
$(".ui - widget - header").css("width", "100");
$("#NewPopupWindowv1 iframe").attr("src", "http://" + hostname + URL);
$("#NewPopupWindowv1 iframe").css("height", "100%").css("border", "0px");
$("#NewPopupWindowv1 iframe").css("width", "100%");
$("#NewPopupWindowv1").dialog(dialogOptions).dialogExtend(dialogExtendOptions).dialog({
// $("#NewPopupWindowv1").dialog(dialogOptions).dialog({
dialogClass: "no-close",
title: Style,
height: 600,
//appendTo: $("form:first"),
width: parseInt(width),
open: function () {
if ($.browser.msie && $.browser.version <= 8) {
$(".ui-dialog").css("left", "25%").css("top", "10%").css("position", "absolute").css("overflow", "hidden").css("display", "block").css("height", "auto").css("width", "950px").css("z-index", "101");
$(".ui-dialog-titlebar-close").css("top", "30%");
$(".ui-widget-header").css("width", "98%");
}
$("#NewPopupWindowv1 iframe").css("display", "block");
$(".ui-widget-header").css("background", "#617D8D").css("color", "#ffffff");
if (Style.indexOf("Demographic") > 0) {
$("#NewPopupWindowv1 iframe").find("#RadPane1").css("display", "none");
}
},
close: function () {
$("#NewPopupWindowv1 iframe").css("display", "none");
},
modal:true
});
}