I want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
Related
I am new in Openlayers 3. I have vector layer importing from geojson file. I would like to show information about my feature after click on vector layer.
Any idea how I can do it?
I used the library from here for this purpose. The sample code is
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
//handling Onclick popup
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var coord = event.feature.getGeometry().getCoordinates();
popup.show(coord, '<div><h2>Tilte</h2><p>' +feature.get('<property_in_single_quotes>')+ '</p></div>');
}
});
Hope this helps
Take a look at these examples:
1) http://openlayers.org/en/v3.14.1/examples/vector-layer.html?q=overlay
2) http://openlayers.org/en/v3.14.1/examples/popup.html?q=overlay
Instead of putting the vector information next to the map, you put it in the popup <div> you created.
I'm data binding to a div which I am then setting as the content of an InfoWindow. When markers on the map are clicked I'm changing the bound observable, which updates the content in the info window. All of this works fine until the info window is closed. Google Maps removes the info window from the DOM, along with my div which had the bindings on it. Re-opening the info window results in its contents being frozen in the state it was in at its closing.
Any changes to the observable no longer update the ui, including using valueHasMutated. I've tried just resetting the content of the info window and rebinding, but the JQuery element still exists and I get duplicated content. I've also tried using cleanNode and rebinding but also get duplicate content with that.
The div which I'm binding too:
<div id="placeTmpl" data-bind="with: place">
<h3>
<a data-bind="text: name, attr: { 'href': detailsUrl($data) }"></a>
</h3>
</div>
The Google Maps InfoWindow:
window.infoWindow = new window.google.maps.InfoWindow({
content: ''
});
window.infoWindow.setContent($('#placeTmpl')[0]);
Event listener and updating observable
window.google.maps.event.addListener(marker, "click", function() {
window.viewModel.openInfoWindow(marker, data);
});
self.openInfoWindow = function (marker, data) {
for (var i = 0; i < self.places().length; i++) {
if (self.places()[i].placeId == data.PlaceId) {
self.place(self.places()[i]);
}
}
window.infoWindow.open(map, marker);
};
Like I said, this all works great until the info window is closed. I'm just looking for a way to force knockout to start updating the ui again or to clear and rebind when the info window is closed.
I was able to go around this by setting the InfoWindow content as an html string rather than a DOM node.
i.e:
window.infoWindow.setContent($('#placeTmpl').html());
rather than:
window.infoWindow.setContent($('#placeTmpl')[0]);
By doing this the html with the knockout bindings remains in place, rather than being transferred into the info window where it was subsequently being destroyed on close. Knockout now updates the bounded DOM elements as usual and I just update the info window with the html string on each click.
If you try to put knockout bindings in a Google Maps InfoWindow, you're gonna' have a bad time.
I was able to solve this without having to resort to using strings when calling setContent. In my case, the info window had dynamic elements that would update while the info window was open, so the string solution would not have taken this into account.
I added a closeclick handler in which I keep track of the original DOM element I passed to the info window and just add the element back to the body after the info window took it out. This keeps knockout happy and the info window doesn't care.
var $node = $('#placeTmpl');
var infoWindow = new google.maps.InfoWindow({
content: $node[0]
});
google.maps.event.addListener(infoWindow, "closeclick", function () {
//google maps will destroy this node and knockout will stop updating it
//add it back to the body so knockout will take care of it
$("body").append($node);
});
I'm adding some info windows on my map with clicking button:
$(document).ready(function() {
$("input:#ekle").click(function(){//balon ekle ve listeye ekle
infoWindow3 = new google.maps.InfoWindow();
var en=$("input:#x").val();
var boy=$("input:#y").val();
var yazi=$("input:isim2").val();
var windowLatLng3 = new google.maps.LatLng(en,boy);
infoWindow3.setOptions({
content: yazi,
position: windowLatLng3,
});
infoWindow3.open(map);
ekle(yazi);//adding Infowindow contecnt(value) to listbox
});
So I can creating InfoWindows.Now I will closing my InfoWindow with clicking an other button :
function cikar(){//listeden cikarma
var cikarilacak=$('#liste option:selected').val();//looking listbox selected item value
$("#liste option[value='"+cikarilacak+"']").remove();
//at this step I will close my InfoWındow where I selected it's value from listbox
}
I will close InfoWindow which I selected it's value from listbox.what can I do
pass the infoWindow-instance as argument to the function that creates the option.
When you create the option, store the reference to the infoWindow with the option(you e.g. may use $.data()).
It's easy then to retrieve the reference to the infoWindow in cikar() and to close the infoWindow.
I'm trying to work out from the Leaflet.js docs how it would be possible to open more than one popup upon showing the page. For instance, if one had three markers (each representing a building), each one would have their popup opened immediately.
http://leaflet.cloudmade.com/reference.html#popup
cryptically says:
"Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want."
but
http://leaflet.cloudmade.com/reference.html#map-addlayer
gives no hints about how this might be achievable.
Can anyone clarify if this is possible, and give any hints on how to do it?
You must add the popups as Layer.
Try with this example code:
var popupLocation1 = new L.LatLng(51.5, -0.09);
var popupLocation2 = new L.LatLng(51.51, -0.08);
var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>',
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>',
popup2 = new L.Popup();
popup2.setLatLng(popupLocation2);
popup2.setContent(popupContent2);
map.addLayer(popup1).addLayer(popup2);
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup();
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
example: http://jsfiddle.net/paulovieira/yVLJf/
found it here: https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ
marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();
use autoClose option
In the latest version, there is an autoClose option.
To have both marker and popup open at same time, without adding layers explicitly :
var popup1 = new L.Popup({'autoClose':false});
popup1.setLatLng([53.55375, 9.96871]);
popup1.setContent('First popup');
var popup2 = new L.Popup({'autoClose':false});
popup2.setLatLng([53.552046, 9.9132]);
popup2.setContent('Second popup');
L.marker([53.55375, 9.96871]).addTo(myMap)
.bindPopup(popup1).openPopup();
L.marker([53.552046, 9.9132]).addTo(myMap)
.bindPopup(popup2).openPopup();
This solution work for me:
L.marker([30.4160534, -87.2226216], {icon: icon_url}).bindPopup('Hello World',{autoClose:false}).addTo(map).openPopup();
here is the preview image: https://prnt.sc/NuX9Qs291IQq
triky solution is remove popup link from map object on open:
map.on('popupopen', function (e) {
delete map._popup;
});
I have the following JQuery code in a external JS file linked into a
usercontrol in .Net 1.1 webapp.
The usercontrol is a timesheet.
When the page loads it calls MonthChange and works fine in one page.
But now I want to load the timesheet/usercontrol into aother
webpage that pops up a in a new browser window for printing.
Problem is my MonthChange is not firing.
Any ideas why???
$(function() {
MonthChange();
//TestData();
$('[class^=TSGridTB]').blur(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, false);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
//CalcHours($(this).get(0));
});
$('[class^=TSGridTB]').focus(function() {
var day = GetDay($(this).attr('id'));
var date = GetRowDate(day);
var bgcolor = GetInputFieldColor(date, true);
$(this).css("background-color", bgcolor);
$(this).parent().css("background-color", bgcolor);
});
$('[id$=lstMonth]').change(function() {
MonthChange();
});
});
without seeing further code, ensure that the selector is correct for the control in the new page.
The problem may be that the DOM has changed for the new page/window and JQuery does not yet know about it.
The change event
fires when a control loses the input
focus and its value has been modified
since gaining focus.
You might want to use the live event:
Binds a handler to an event (like
click) for all current - and future -
matched element.
When you bind a "live" event it will
bind to all current and future
elements on the page (using event
delegation). For example if you bound
a live click to all "li" elements on
the page then added another li at a
later time - that click event would
continue to work for the new element
(this is not the case with bind which
must be re-bound on all new elements).
Did you make sure that the new web page has jQuery script includes?
ensure you're using:
$(document).ready(
);
around your entire code block. The $ alone often does not do the trick.