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
Related
How can I make edit button work in a data table in angular 7. I would also like to know how to load a component on button click,
Ok here is my idea to acheive it
First for a button to work we use (click)
<button (click)="toggledata()">Show</button>
<demo-component *ngIf="value"></demo-component>
.ts
value = false;
toggledata() {
this.value = !this.value;
}
How to disable menu button press in TVML? For some scenarions in my project,like while playing Ads in video, I dont want user to skip it by pressing menu button.I did not see any solution on internet. Please help.
function loadingDoc() {
var Template = `
<document>
<divTemplate>
<title style="tv-position: bottom-right;">1/1</title>
</divTemplate>
</document>`
var templateParser = new DOMParser();
parsedTemplate = templateParser.parseFromString(Template, "application/xml");
parsedTemplate.addEventListener("disappear", highlightThumbnail.bind(this));
player.interactiveOverlayDocument = parsedTemplate;
player.interactiveOverlayDismissable = true;
}
var highlightThumbnail = function (event){
loadingDoc();
}
Two solutions that might work are:
1) Native + TVML: find the topmost view controller as mentioned in iPhone -- How to find topmost view controller and apply UITapGestureRecognizer to it.
2) TVML only: with interactiveOverlayDismissable and interactiveOverlayDocument, you can push another overlay document when the user dismisses the current one. Thus-- they will never be able to menu out.
I have the following code:
for (var i=0; i<len; i++){
var benID = results.rows.item(i).ID;
$('#'+element_id).append(
"<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+
'Eliminar</li>');
$("."+page+"_dis_ben_"+benID).click(function(){
console.log("Item to disable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red');
$(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID);
});
$("."+page+"_enable_ben_"+benID).click(function(){
//NOT WORKING
console.log("Item to enable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red');
$(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID);
});
}
I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.
Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.
Do you have any ideas?
Use .on
http://api.jquery.com/on/
var selector = "."+page+"_enable_ben_"+benID;
$("#yourList").on("click", selector, function(event){
//Insert handler code
});
Found the solution to the last question in the comment right here in stackoverflow:
jQuery Mobile click events on dynamic list items
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();
}
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"