I am trying to create a button that will print a google map embedded on a webpage
see code:
function print(){
var contents = window.opener.document.getElementById("map_canvas");
document.write(contents.innerHTML);
window.print();
}
this is the div that holds my map
<div id="map_canvas" style="width:800px; height:500px;"></div>
and this is the print button
<input type="button" value="Print" onclick="print()">
When I click the print button I get an error "window.opener is null."
What is the correct code to print the map?
window.opener returns a reference to the window that created the window. No window.opener is needed here since you didn't create any new windows.
Directly use window.document.getElementById.
Try this:
function print(){
var contents = window.document.getElementById("map_canvas");
document.write(contents.innerHTML);
window.print();
}
var content = window.document.getElementById("map-canvas"); // get you map details
var newWindow = window.open(); // open a new window
newWindow.document.write(content.innerHTML); // write the map into the new window
newWindow.print(); // print the new window
Check if DIV that contain map on primary window have div with id="map_canvas"
Related
I'm working with angular-google-map.when marker is clicked info-window will open and hides previos window when other marker is clicked.now I want to close the info window when mouse clicked on map .
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [disableDefaultUI]="false" [zoomControl]="true"
[scrollwheel]="false" [streetViewControl]="false" [fitBounds]="false" (zoomChange)="onagmZoomChange($event)">
<agm-marker *ngFor="let c of markers; let i = index" (markerClick)="clickedMarker(infowindow, i)" [latitude]="c.location_details_lat"
[longitude]="c.location_details_lon" [iconUrl]="m.icon">
<agm-info-window #infowindow [maxWidth]="320" >
<div class="info-header">
<h2>add: {{ c.add }}</h2>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
Add a handler for the mapClick event on the AgmMap that checks if you have an open info-window, and if you do, close it. Since you have already implemented a handler to have only a single info-window open, you probably have a variable holding the window that is open, something like:
private singleInfoWindow: AgmInfoWindow = null;
Your handler for the AgmMap mapClick event can close that infoWindow:
if (this.singleInfoWindow) {
this.singleInfoWindow.close();
this.singleInfoWindow = null;
}
Best solution is to use the closeOnMapClick property option on your instance of snazzy-info-window:
[closeOnMapClick]= "true"
This is taken from documentation of closeOnMapClick, where you can read further: https://github.com/atmist/snazzy-info-window#closeonmapclick
I have a Kendo window which is defined as follows:
With Html.Kendo().Window().Name("tranferwindow")
.Title("Select Transfer Destination")
.Content("")
.Resizable()
.Modal(True)
.Events(Function(events) events.Open("WindowToCenter"))
.Events(Function(events) events.Refresh("transferopen"))
.Draggable()
.Width(400)
.Visible(False)
.Render()
End With
The window is opened each time by using the refresh and passing a new URL.This is to allow dynamic data to be displayed dependent on what the user clicked on a grid.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wwindow.data("kendoWindow").open(); //Display waiting window while refresh happens
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").refresh('/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID);
}
The Window is opened at the end of the refresh event to make sure the user doesn't see the previous content.
function transferopen() {
wwindow.data("kendoWindow").close(); //Close the 'wait' window
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
This all works well and the window can be closed and reopened as often as I like.
However I needed to access the resize event of the window from within the Partial View to resize the Grid which is inside the window. To achieve this I added the following to the partial view that is returned from the url.
$("#tranferwindow").kendoWindow({
resize: function (e) {
// resizeGrid();
}
});
Adding this event mapping causes the issue where I cannot open the Window more than once.
I assume I need to 'unregister' for the event somehow before closing?
Found a solution: much cleaner and no VB Razor needed :)
I changed the approach to create a new window each time I wanted to display one.
I created a div to hold the Window.
<div id="windowcontainer"></div>
Then when the user selected a command on the grid , I create the whole window appending it to the div. The key here is the this.destroy in the deactivate event.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#windowcontainer").append("<div id='tranferwindow'></div>");
var mywindow = $("#tranferwindow")
.kendoWindow({
width: "400px",
title: "Select Transfer Destination",
visible: false,
content: '/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID,
deactivate: function () {
this.destroy();
},
open: WindowToCenter,
refresh:transferopen
}).data("kendoWindow");
mywindow.refresh();
}
Then on the refresh function
function transferopen() {
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
Now I can have the event binding inside the Partial View which works fine and the window can be re opened as many times as I want. :)
Update: Adding the event binding inside the Partial View stops 'Modal' from working. Working on trying to fix this...
Im trying to use pass my car value to another function, which i have no idea how. i tried to place the whole function btn-info-add into .span8. But this it will execute twice on the 2nd time.
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
var car; //car must be declared out of your function to be available for both functions
$(".span8").on("click", "table #trID", function() {
car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
You can create a hidden element inside your dialog (input would be great) and assign it your desire value.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input id="carvalue" type="hidden" value=""/>
</div>
Note that I created an input element (hidden, of course) which is going to store the value that I want to access later. After that, you can modify your code like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$("#carvalue").val(car); // Store value into hidden input
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
var car = $("#carvalue").val(); // retrieve value from input hidden
if(car != ""){
selectCourse(car);
}
});
This technique is commonly used in forms to pass additional information on AJAX calls. Your user will not notice its presence and you can keep working. Happy coding!
EDIT:
JQuery has a method called jQuery.data to store information into JQuery elements. So your values are going to be stored on the element itself. Your code will look like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
jQuery.data("#btn-info-add", "car", car); // store data inside jQuery element
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(jQuery.data("#btn-info-add", "car")); //execute ajax
});
I hope it helps you. Happy coding!
is there a way to click marker created by OpenLayers.Marker() to be able to redirect to another link.
i have tried
var marker = new OpenLayers.Marker(position, icon.clone());
marker.events.register("click", map, function(e) {
location.href = "http:www.google.com"
});
by doing so, i am able to have a click event when i click the marker and redirects me to www.google.com. But what i am interested to know is, am i able to set the url directly to the marker when i create the marker in the first place?
You should be able to add any property to your marker like this:
marker.URL = "http://www.google.com/";
Then your event handler can be written once like this:
function linkHandler(e) {
location.href = this.URL;
}
marker.events.register("click", marker, linkHandler);
Note that the "map" parameter in the marker.events.register call was changed to "marker".
I am using telerik MVC control and I am having a popup window and I want to close the pop up window by firing click event from my cancel button on the popup window .
Can someone tell me how should I do it ?
This is what I did
<input type="button" value="Cancel" onclick="onClose()" />
and my java script is like this
<script type="text/javascript">
function onClose() {
window.close();
}
</script>
but when I do that I get a confirmation box asking me whether I want to close the window and If I select yes my browser window is closed.
I just did a similar thing with the asp.net-ajax window from telerik.
They have demos out that helped me.
Try http://demos.telerik.com/aspnet-mvc/window/clientsideapi for the mvc controls
You need to get a handle of the object
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
Then you can call close on the rad window object
function windowClose(reload) {
var oWindow = GetRadWindow();
oWindow.close();
}