Please, I need a help.
I want to check if my infowindow is opened.
For example:
if (infowindow.isOpened)
{
doSomething()
}
or
if (infowindow.close)
{
doAnotherthing();
}
I dont have any idea, how to do this
This is an undocumented feature, and is therefore subject to change without notice, however the infoWindow.close() method sets the map on the object to null (this is why infoWindow.open(map, [anchor]) requires that you pass in a Map), so you can check this property to tell if it is currently being displayed:
function isInfoWindowOpen(infoWindow){
var map = infoWindow.getMap();
return (map !== null && typeof map !== "undefined");
}
if (isInfoWindowOpen(infoWindow)){
// do something if it is open
} else {
// do something if it is closed
}
Update:
Another potentially useful way to write this is to add an isOpen() method to the InfoWindow prototype.
google.maps.InfoWindow.prototype.isOpen = function(){
var map = this.getMap();
return (map !== null && typeof map !== "undefined");
}
Until google doesn't give us any better way of doing this, you can add a property to the infoWindow objects. Something like:
google.maps.InfoWindow.prototype.opened = false;
infoWindow = new google.maps.InfoWindow({content: '<h1> Olá mundo </h1>'});
if(infoWindow.opened){
// do something
infoWindow.opened = false;
}
else{
// do something else
infoWindow.opened = true;
}
I modified the prototype for google.maps.InfoWindow and changed open/close to set/clear a property:
//
// modify the prototype for google.maps.Infowindow so that it is capable of tracking
// the opened state of the window. we track the state via boolean which is set when
// open() or close() are called. in addition to these, the closeclick event is
// monitored so that the value of _openedState can be set when the close button is
// clicked (see code at bottom of this file).
//
google.maps.InfoWindow.prototype._open = google.maps.InfoWindow.prototype.open;
google.maps.InfoWindow.prototype._close = google.maps.InfoWindow.prototype.close;
google.maps.InfoWindow.prototype._openedState = false;
google.maps.InfoWindow.prototype.open =
function (map, anchor) {
this._openedState = true;
this._open(map, anchor);
};
google.maps.InfoWindow.prototype.close =
function () {
this._openedState = false;
this._close();
};
google.maps.InfoWindow.prototype.getOpenedState =
function () {
return this._openedState;
};
google.maps.InfoWindow.prototype.setOpenedState =
function (val) {
this._openedState = val;
};
You also need to monitor the closeclick event because clicking on the close button does not call close().
//
// monitor the closelick event and set opened state false when the close
// button is clicked.
//
(function (w) {
google.maps.event.addListener(w, "closeclick", function (e) {
w.setOpenedState(false);
});
})(infowindow);
Calling InfoWindow.getOpenedState() returns a boolean which reflects the state (opened/closed) of the infowindow.
I chose to do it this way instead of the using the InfoWindow.getMap() or MVCObject.get('map') method because of the well known pitfalls of using undocumented behavior. However google uses MVCObject.set('map', null) to force the removal of the InfoWindow from the DOM, so it is unlikely that this will change...
infowindow.getMap() returns null if infowindow is closed.
So you can use simply:
if (infowindow.getMap());
You can simply set key and value for infoWindow: infoWindow.set('closed', true);
example:
const infoWindow = new google.maps.InfoWindow({
content: 'foo',
position: {
lat: some_number,
lng: some_number
}
});
infoWindow.set('closed', true);
// Clicking on polyline for this example
// Can be marker too
polyline.addListener(
'click',
() => {
if (infoWindow.get('closed')) {
infoWindow.open(map);
infoWindow.set('closed', false);
} else {
infoWindow.close();
infoWindow.set('closed', true);
}
}
);
Related
Employing a variation on function attachSecretMessage and using a mousedown event, I am able to include the marker's title property as a Closure, but on the desktop platform, when a user clicks on the marker and then moves the mouse out of the opened infowindow, the map is dragged until the user clicks somewhere else (I don't know yet what happens on the mobile platform). I have attempted to remove the draggable feature of the map, but unsuccessfully. Can the draggability of the map be defeated?
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
map.draggable = false;
infowindow.open(map,marker);
});
}
Oops. It appears that simply resequencing the javascript instructions defeats the drag. I moved the map.draggable = false; after the info window.open() and no more dragging.
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
infowindow.open(map,marker);
map.draggable = false;
});
}
I'm trying to detect when the user hits "refresh" from my app to load some data.
I have this:
var refresh = function() {
alert('refresh');
};
var vm = {
refresh: refresh,
data: ko.observable()
};
However I never get the alert in my browser, and a breakpoint set at the opening of the function does not get hit when I refresh the page from this view. How can I properly use the refresh function?
I would suggest hooking into the canDeactivate method in your view model.
var refresh = function() {
alert('refresh');
};
var canDeactivate = function(isClose){
if (isClose)
{
refresh();
return false;
}
else return true;
};
var vm = {
data: ko.observable(),
canDeactivate: canDeactivate
};
I have the following code, which should trigger an alert when a Polygon shape is changed. This alert only appears after the shape has been changed twice. Meaning, I have to resize the shape two times before the event is triggered.
Any idea as to what may be causing this behavior?
function drawListener(drawingManager) {
var coord_listener = google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var coordinates = (polygon.getPath().getArray()); //get
var bounds = new google.maps.LatLngBounds();
var people = [];
google.maps.event.addListener(polygon.getPath(), 'set_at', function () { //check to see if the item has been changed //THIS ONLY GETS CALLED AFTER POLYGON HAS BEEN CHANGED TWICE
alert('changed');
});
});
I found my answer: I must use 'insert_at' in addition to 'set_at'
google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
alert('changed');
});
google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
alert('also changed');
});
Thanks.
In a application, I am using google map to display stations with google marker, because the google marker is static with icon not animated, so I decided to inherit OverlayView and use canvas to draw a station dynamically. And this works, however, I want this overlay to receive the google events like the marker, such as click, mouse over, mouse out...
For example,
function StationCanvas(map, position, name) {
this.map_ = map;
this.position_ = position;
this.name_ = name;
this.canvas_ = null;
this.labelDiv_ = null;
this.canvasWidth_ = 12;
this.canvasHeight_ = 50;
this.setMap(map);
console.log('canvas '+this.position_);
}
StationCanvas.prototype = new google.maps.OverlayView();
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.canvasWidth_);
canvas.setAttribute("height", this.canvasHeight_);
canvas.style.position = "absolute";
this.canvas_ = canvas;
var panes = this.getPanes();
panes.floatPane.appendChild(canvas);
this.labelDiv_ = document.createElement("div");
this.labelDiv_ .setAttribute("width", this.canvasWidth_);
this.labelDiv_ .setAttribute("height", this.canvasHeight_);
this.labelDiv_ .style.position = "absolute";
this.labelDiv_ .innerHTML = this.name_;
panes.floatPane.appendChild(this.labelDiv_ );
/////////////////////////////////////////////////////////////
this.listeners_ = [
google.maps.event.addListener(this.canvas_, "mouseover", function (e) {
//this.style.cursor = "pointer";
//google.maps.event.trigger(this, "mouseover", e);
console.log('mouse mover');
}),
google.maps.event.addListener(this.canvas_, "mouseout", function (e) {
//this.style.cursor = this.getCursor();
//google.maps.event.trigger(this, "mouseout", e);
console.log('mouse out');
}),
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
}),
google.maps.event.addListener(this.canvas_, "dblclick", function (e) {
//google.maps.event.trigger(this, "dblclick", e);
}),
];
}
Intially, I use google.maps.event.addListener as showed above to listen the event, nothing happens, so it seems canvas doesn't work with google.maps.eventListener.
Then I found google has provided a addDomListener(instance:Object, eventName:string, handler:Function), but since it only support dom rather then canvas, so when I used that listener, the browser breaks down.
At last, I have tried to use
canvas.onmouseout = function() {
console.log("on mouse out");
}
}
It is supposed to work, but still no, I guess something wrong within the code. even this works, the next question is how can I trigger the event to outside, so that I can work this overlayview like the google marker
var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13);
google.maps.event.addListener(test1, 'click', function(event){
console.log('test 1 click');
});
addDomListener works for me, even with <canvas/>
What would break your code is e.g. this:
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
})
this , when used in a event-callback, refers to the object that triggers the event(here: the canvas-node), your code produces a recursion. When you want to trigger the click-event for the StationCanvas-instance, you may store the instance as a property of the canvas-element, so it will be easy accessible inside the click-callback
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.overlay=this;
//more code
}
this.listeners_ = [
google.maps.event.addDomListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this.overlay,'click')
}),
google.maps.event.addListener(this, "click", function (e) {
alert('click on the StationCanvas-instance');
})
];
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});