I need to handle the case when a user clicks on a mapTypeControl differently than when it's set through map.setMapTypeId(). How do I listen for clicks on map type controls?
You can't listen for events on the default UI control set. But if you are strictly focused on differentiating between clicks on the mapTypeControl and map.setMapTypeId(), you could use the fact that you control the code that may call setMapTypeId() and add some state management code:
// First, add a new state var:
var typeIdChangedInCode = false;
// Then, anywhere in your code where you call setMapTypeId(), add this:
typeIdChangedInCode = true;
map.setMapTypeId( newTypeId );
// Finally, include state checking code in the map event listener:
google.maps.event.addListener( map, "maptypeid_changed", function( evnt ) {
if ( typeIdChangedInCode ) {
//handle the scenario in the non-click way, but REMEMBER TO:
typeIdChangedInCode = false;
}
else {
//handle the scenario in the map click way
}
});
This should set you up to handle the two different occurrences in the way you need.
google.maps.event.addListener(map, 'maptypeid_changed', function(e){
alert(map.getMapTypeId());
});
Related
I have to show ads on my page and a defaultImage when there is no ads.
googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
.addService(googletag.pubads());
In there a way to record no ads in code in order to show the defaultImage ?
You could use an event listener such as slotRenderEnded (documentation here)
// This listener is called when a slot has finished rendering.
googletag.pubads().addEventListener('slotRenderEnded',
function(event) {
var slot = event.slot;
var isEmpty = event.isEmpty;
if (isEmpty) {
//add your default image
}
}
);
Alternatively, you might be interested in using googletag.content() as detailled here.
I have a use-case where I need to programmatically add/remove the onClick event associated with a panel.
I have tried the following solution but receive a cijCell.addEventListener is not a function error.
function cij_enabled(){
var cijCell = app.pages.Home.descendants.cellFour;
var index = cijCell.styles.indexOf('disabled-card');
if (Report.riskOfLoss === 'High') {
cijCell.styles.splice(index, 1);
cijCell.addEventListener("click", function() {
app.popups.Customer.visible = true;
});
} else {
if (index === -1){
cijCell.styles.push('disabled-card');
cijCell.removeEventListener("click", function() {
app.popups.Customer.visible = true;
});
}
}
}
How can I achieve the desired outcome? Is adding eventlisteners possible in this fashion through app maker?
You can definitely do so and you got it almost right. The only thing you need to understand is that the appmaker widget is not a native html element hence the error:
cijCell.addEventListener is not a function
Fortunately, AppMaker has a way of getting the native html elements associated to a widget. You need to use the getElement() method and then you can use the add/remove event listeners methods. So you should change your code from cijCell.addEventListener... to cijCell.getElement().addEventListener...
Reference: https://developers.google.com/appmaker/scripting/api/widgets#Panel
I'm trying to work out how I can display a form to a user upon their first login to my app ( to fill in profile information) after which they can proceed to the regular site.
Could anyone point me in the right direction?
Thanks
You can make the trick using app startup script:
https://devsite.googleplex.com/appmaker/settings#app_start
Assuming that you have Profile model/datasource, code in your startup script will look similar to this:
loader.suspendLoad();
var profileDs = app.datasources.Profile;
// It would be more secure to move this filtering to the server side
profileDs.query.filters.UserEmail._equals = app.user.email;
profileDs.load({
success: function() {
if (profileDs.item === null) {
app.showPage(app.pages.CreateProfile);
} else {
app.showPage(app.pages.HomePage);
}
loader.resumeLoad();
},
failure: function() {
loader.resumeLoad();
// your fallback code goes here
}
});
If profile is absolute must, I would also recommend to enforce the check in onAttach event for every page but CreateProfile (to prevent navigation by direct link):
// Profile datasource should be already loaded by startup script
// when onAttach event is fired
if (app.datasources.Profile.item === null) {
throw new Error('Invalid operation!');
}
I suggest checking the user profile upon login. If the profile is not present, display the profile form, otherwise, proceed to the regular site.
I can create infobubbles using the HERE maps Javascript API - eg from their documentation:
function addInfoBubble(map) {
map.set('center', new nokia.maps.geo.Coordinate(53.430, -2.961));
map.setZoomLevel(7);
var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? 'tap' : 'click',
container = new nokia.maps.map.Container();
container.addListener(CLICK, function (evt) {
infoBubbles.openBubble(evt.target.html, evt.target.coordinate);
}, false);
map.components.add(infoBubbles);
map.objects.add(container);
addMarkerToContainer(container, [53.439, -2.221],
'<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
'</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');
addMarkerToContainer(container, [53.430, -2.961],
'<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
'</div><div >Anfield<br>Capacity: 45,362</div>');
}
function addMarkerToContainer(container, coordinate, html) {
var marker = new nokia.maps.map.StandardMarker(
coordinate,
{html: html}
);
container.objects.add(marker);
}
I would like to hook into the close event of the infobubble. I realise I could use jQuery to find the span that contains the close button (examining the markup, I believe it has the class nm_bubble_control_close) and do something when this is clicked. However I thought there would be a built-in event that I could use.
Does anyone know if there is a built-in event that fires when the infobubble is closed? I can't find anything in the documentation.
The InfoBubbles component has a property "openBubbleHandles". It's an OList you can observe to see when bubbles are opened (i.e. added to the list) or closed (removed from the list).
AFAIK there is no built-in event, there's also no related property which may be observed.
Possible workaround:
override the built-in close-method with a custom function:
container.addListener(CLICK, function (evt) {
var b = infoBubbles.openBubble(evt.target.html, evt.target.coordinate),
c = b.close;
b.close = function(){
//do what you want to
alert('bubble will be closed');
//execute the original close-method
c.apply(b)
}
}, false);
For the current HERE Javascript API version (3.x) the working solution can be found here:
HERE Maps - Infobubble close event / hook
I have the following situation:
A polyline is added on the map and when the user clicks over it its state changes to editable. Also i have event where if the user clicks the last vertext of the polyline and starts moving the mouse to be able to extend the polyline with the mouse path the user is drawing.
However it seems that when i have an event and inside this event i try to add another one it simply does not work and i don't kwow why.
Just in case to make things simpler to undrstand i will paste a part of my code.
google.maps.event.addListener(polyLine, "mousedown", function(event){
if(polyLine.getEditable() === true)
{
if(typeof event.vertex !== "undefined")
{
if(event.vertex === polyLine.getPath().getLength() - 1)
{
polyLine.setEditable(false);
if(mouseMoveDrawingEvent === null)
{
map.setOptions({draggable:false});
polyLine.setOptions({clickable:false});
mouseMoveDrawingEvent = google.maps.event.addListener(map, "mousemove", function(event)
{
alert("1"); // <== this never fires
polyLine.getPath().push(event.latLng);
drawingLabel.setPoint(event.latLng);
drawingLabel.setContents("<div style='background-color:white'>" + (google.maps.geometry.spherical.computeLength(polyLine.getPath()) / 1000).toFixed(2) + " ΠΊΠΌ.</div>");
});
}
map.getDiv().onmouseup = function(ev) {
polyLine.setOptions({clickable:true});
map.getDiv().onmousedown = null;
map.getDiv().onmouseup = null;
google.maps.event.removeListener(mouseMoveDrawingEvent);
mouseMoveDrawingEvent = null;
};
}
}
}
});
.....
thre is another event here that listens for 'mouseup'....
Do you guys have any idea how to make this peace of code works.
I found a solution to my questions.
The problem was that when i set the polyline {clickable:false} the api removes the event ( and obviously everyhing inside it:)