I am working on the user information popup window with Kendo ASP.NET. The popup also has tabs which are created with @Html.Kendo().TabStrip().
So far, displaying and entering data works fine. But, I'm having trouble with adding a map into the popup editor.
This is sample popup. There are street name, street number, etc. Although Google Map doesn't interact with data yet, I wanted it display correctly.
Location.cshtml:
@(Html.Kendo().TabStrip()
.Name("tabstripLocationPopup")
.Items(tabstrip =>
{
tabstrip.Add().Text("Location")
.Selected(true)
.LoadContentFrom("", "")
.Content(@<text>
<div id="GeoLocation" class="tab" style="overflow: auto; height: 90%;">
<fieldset>
<legend accesskey="I">Identification</legend>
<table border="0" style="width: 95%; margin: 0 auto; border-collapse: collapse; border: 0px solid black;">
<tr>
<td class="label">
@Html.LabelFor(model => model.Lat, "Latitude")
</td>
<td class="editor">
@Html.Kendo().MaskedTextBoxFor(model => model.Lat).Name("Lat")
</td>
<td class="label">
@Html.LabelFor(model => model.Long, "Longitude")
</td>
<td class="editor">
@Html.Kendo().MaskedTextBoxFor(model => model.Long).Name("Long")
</td>
<tr>
</table>
</fieldset>
</div>
</text>);
})
)
I added script to index.cshtml:
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=MyAPICode&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
If I add this code to index.cshtml file, then a map display correctly.
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:200px"></div>
</body>
However, I want it to be displayed inside of popup (Location.cshtml).
The only way that I make it show is add button in Javascript and initialize map when button was clicked.
Please guide me if I missed something here.
take a look at this dojo that I have set up
to highlight what I have done.
Note: You will need to add your API Key and authorise the site in your API Dev console for the map to be shown otherwise you will get an Unauthorised or Invalid Key message being shown
I used one of Telerik's own demos and then added the following bits:
editable: {
mode: "popup",
template: kendo.template($("#editor").html())
},
edit: function(e){ initialize()}
then added this sample template script for the pop up window. Removing everything else just to keep it simple
<script id="editor" type="text/x-kendo-template">
<div id="GeoLocation" class="tab" style="overflow: auto;width:300px; height: 300px;">
</div>
</script>
Then just using your initialize script like so:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("GeoLocation"),
mapOptions);
}
All I had to do is move where this code is being called. From the usual OnLoad that google usually demo's to the edit function of the grid. So when the pop up window is shown this will get fired off before the window is shown and initialize it to what ever you need it too.
if you need any further help let me know.