How would I go about displaying the default Google Maps controls when the user hovers over the map? Otherwise, I would like the controls to be hidden.
You may use the setOptions-method of the map to hide or show the controls. Pass as argument an object with all controlOptions you want to show/hide and set the values of the controls to true or false.
Add eventlisteners for mouseout and mouseover to the map and set the options there.
Example:
//the controls you want to hide
var controlsOut={
mapTypeControl:false,
zoomControl:false,
panControl:false,
streetViewControl:false
};
//create a copy of controlsOut and set all values to true
var controlsIn={};
for(var c in controlsOut)
{
controlsIn[c]=true;
}
//initially hide the controls
map.setOptions(controlsOut)
//add listeners to show or hide the controls
google.maps.event.addDomListener(map.getDiv(),
'mouseover',
function(e)
{
e.cancelBubble=true;
if(!map.hover)
{
map.hover=true;
map.setOptions(controlsIn);
}
});
google.maps.event.addDomListener(document.getElementsByTagName('body')[0],
'mouseover',
function(e)
{
if(map.hover)
{
map.setOptions(controlsOut);
map.hover=false;
}
});
This seems to be about the only question about making the maps controls hover-only. The above answer wasn't quite working for me so I thought I'd document my own modifications:
// dom is the enclosing DOM supplied to new google.maps.Map
// controlsIn and controlsOut are hashes of options to set
// when the mouse enters or exits.
$(dom).mouseenter(function(evt) {
if (!map.hover) {
map.hover = true
map.setOptions(controlsIn)
}
});
$('body').mouseover(function(evt) {
if (map.hover) {
if ($(evt.target).closest(dom).length == 0) {
map.hover = false
map.setOptions controlsOut
}
}
});
Related
I'm new to Mootools and I have found that I have to use the click element but I'm not 100% sure where I am meant to put it in the below code:
function setInStockOption (labels, e) {
active = false;
labels.some (function (item,index) {
if(item.hasClass ('selected')) {
if(item.hasClass ('unavailable')) {
item.removeClass('selected');
item.addClass ('unselected');
active = true;
} else {
return true;
}
}
if(active) {
if (!item.hasClass ('unavailable')) {
e.target = this;
item.fireEvent ('click', e);
active = false;
return true;
}
}
});
}
window.addEvent('load', function(e) {
var labels = $$('div.option-radios label.radio');
setInStockOption(labels, e);
});
I basically need to add the class selected on click instead. At the moment this script is adding the selected class to the first child of Radio in the html and then when you click on others it'll add the class selected. I basically want all the classes to be unselected when the page loads
.
Any ideas?
You'll want something like this:
window.addEvent('domready', function(e) {
$$('div.option-radios label.radio').each(function(label, i) {
label.addEvent('click', function(event) {
event.target.toggleClass('selected');
});
});
});
Note that this uses the Array.each method instead of Array.some. The latter doesn't do what you expect. It then registers a click event on every label which simply toggles the selected class on the event target.
Then you can add other initialization code to the each loop and more logic to the click event handler.
I also used the domready event which is usually preferred over load since it fires earlier.
Here's a fiddle to play around with.
I need to load different content into a Magnific-popup which opens when clicking buttons inside infoboxes attached to markers in Google Maps.
I plan to list the content in an array outside the magnificPopup function (see below) that defines all the markers with corresponding content. How do I call the right content into the magnific-popup? Do I target the marker, the button or the infoBox? ...and how?
window.google.maps.event.addListener(infoBox, "domready", function () {
$('.open-popup').on('click', function () {
$.magnificPopup.open({
items:
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
}
});
});
});
A working example of where I am at is here >> http://jsfiddle.net/asier_adq/JdWmm/4/
Thanks in advance for any pointers.
Solved! In this case Infoboxes are the key to linking a click to a marker. So given that var ib = new InfoBox();
Then, inside a function that attaches infoboxes to the markers I add a new property 'num' to the 'ib' object and define it by each markers 'i' variable. ib.num = i;
Then I can use it inside the magnificPopup function to call for the triggered marker's values I have stored in an array. markerData[ib.num][7]
The new script:
window.google.maps.event.addListener(ib, "domready", function () {
$('.open-popup-photo').on('click', function () {
$.magnificPopup.open({
items: {
src: markerData[ib.num][7]
},
type: 'image' // this is default type
});
});
});
I have a GoogleMaps APIv3 application in which multiple InfoWindows can be open at any one time. I would like to be able to bring an obscured InfoWindow to the front of all other InfoWindows if any part of it is clicked - similar to the behaviour of windows in MS Windows OS.
I had thought to add an onclick event handler which increases the z-index of the InfoWindow, but the event handler does not appear to be firing.
ZIndex is a global variable that keeps increasing as InfoWindows are clicked - or thats the theory anyway.
Can anyone help ?
Here is my code:-
var ZIndex=1;
var iw = new google.maps.InfoWindow({ content:contentString });
google.maps.event.addListener(iw, 'click', handleInfoWindowClick(iw) );
function handleInfoWindowClick(infoWindow) {
return function() {
infoWindow.setZIndex(ZIndex++);
}
}
there is no click-event for an infoWindow, it's a little bit more difficult.
you'll need to use an element(not a string) as content for the infowindow, because you need a DOMListener instead a listener for the infowindow-object
when domready-fires, you must apply the click-DOMListener to the anchestor of this content-node that defines the infowindow
The following code will do this for you, add this to your page:
google.maps.InfoWindowZ=function(opts){
var GM = google.maps,
GE = GM.event,
iw = new GM.InfoWindow(),
ce;
if(!GM.InfoWindowZZ){
GM.InfoWindowZZ=Number(GM.Marker.MAX_ZINDEX);
}
GE.addListener(iw,'content_changed',function(){
if(typeof this.getContent()=='string'){
var n=document.createElement('div');
n.innerHTML=this.getContent();
this.setContent(n);
return;
}
GE.addListener(this,'domready',
function(){
var _this=this;
_this.setZIndex(++GM.InfoWindowZZ);
if(ce){
GM.event.removeListener(ce);
}
ce=GE.addDomListener(this.getContent().parentNode
.parentNode.parentNode,'click',
function(){
_this.setZIndex(++GM.InfoWindowZZ);
});
})
});
if(opts)iw.setOptions(opts);
return iw;
}
Instead of google.maps.InfoWindow() you must call now google.maps.InfoWindowZ()
It also returns a genuine InfoWindow, but with the mentioned listener applied to it. It also creates the node from the content when needed.
Demo: http://jsfiddle.net/doktormolle/tRwnE/
Updated version for visualRefresh(using mouseover instead of click) http://jsfiddle.net/doktormolle/uuLBb/
I have a marker on the map to which I want to bind two events:
click
dblclick
I want to do the following:
When user clicks on the marker, map should zoom-in and will show
more detailed map.
I want to bind 'dblclick' event to the same marker so that it will
load some third-party reports in adjacent 'div' element.
In other words, I want it to behave differently when user clicks or dblclicks. But the problem is, when I bind both these event to marker and user 'double clicks' the marker, 'click' handler is getting fired, which I don't want to let it happen.
Is it true that, when user double-clicks, click event is also fired? If so, how to prevent it from triggering 'click' event when user actually double-clicked?
Is there any way so that I can do different things on either click and double-click event of the marker?
It's a known nuance of the api, you need to install a click counter timeout, like this:
function createMap2() {
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map2"), myOptions);
var doubleClicked=false;
var clickEvent;
google.maps.event.addListener(map, 'dblclick', function(event) {
doubleClicked=true;
});
function handleClick() {
if (!doubleClicked) {
infoWindow.setPosition(clickEvent.latLng);
infoWindow.setContent(createInfo(clickEvent));
infoWindow.open(map);
}
}
google.maps.event.addListener(map, 'click', function(event) {
clickEvent = event;
doubleClicked = false;
window.setTimeout(handleClick, 250);
});
}
Above code extracted from http://www.william-map.com/20100506/1/v3click.htm
Check out these links for more info:
https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/YRAvYHngeNk
https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/2MomDiLMEiw
You can use a pre-handler function that separates single from double clicks. In this case, the second click must come within 500 miliseconds of the first one:
//Global vars
var G = google.maps;
var clickTimeOut = null;
G.event.addListener(marker,'click',mClick);
function mClick(mev) {
if (clickTimeOut) {
window.clearTimeout(clickTimeOut);
clickTimeOut = null;
doubleClick(mev);
}
else {
clickTimeOut = window.setTimeout(function(){singleClick(mev)},500);
}
}
function doubleClick(mev) {
// handle double click here
}
function singleClick(mev) {
window.clearTimeout(clckTimeOut);
clickTimeOut = null;
// handle single click here
}
mev is the mouseEvent object that the event handlers receive as parameter.
I have a web app with a map in it. I've added a nice little custom map control to turn on and off different layers on the map. Currently there are only two layers, and it all works nice and fine in most browsers.
Except for IE8+7. None of the layers are showing on the map when turned on. As far as I can tell the map is loading the kmz/kml files (when preserveViewport is set to false, the map moves to the right location) but they're just not appearing. One layer contains polylines, and the other contains markers. The code I use is below:
function someFunction() {
//code to initialise map etc goes here...
var layers = [];
//Create 1st layer
var exchangeslayer = new google.maps.KmlLayer('http://link.to.file/exchanges.kmz'
suppressInfoWindows: true,
preserveViewport: true
});
layers.push({name: "Exchanges", layer: exchangeslayer});
//Code to create second layer
var nyclayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml'
suppressInfoWindows: true,
preserveViewport: false
});
layers.push({name: "NY City Tracks", layer: nyclayer});
addCustomLayerControls(layers);
}
function addCustomLayerControls(layers) {
//there is code here that would generate the divs for the custom map control
var container; //container is a div element created via javascript
for (var i = 0; i < layers.length; i++) {
this.addLayerLabelToContainer(layers[i], container);
}
//some more code
}
function addLayerLabelToContainer(layer, container) {
var map; //Assume I get a reference to the map
//some code here to make pretty labels for the map controls...
var layerLabel; // layerLabel is a div element created via javascript
google.maps.event.addDomListener(layerLabel, 'click', function() {
if(layer.layer.map == null) {
layer.layer.setMap(map);
} else {
layer.layer.setMap(null);
}
});
}
So as it turns out my problem related to CSS. One of my stylesheets was applying max-width: 100% to all img tags. This was playing havok with the map markers/polylines.
Its obvious now that I see it, but when you think the problem is to do with the javascript its not so obvious. As such, I'll leave this answer here for anyone else who makes the same mistake as me.
If you modify addLayerLabelToContainer() like this then it works in IE as expected. Verified it loads KMZ correctly in IE 8 and 9.
function addLayerLabelToContainer(layer, container) {
// var map; //Assume I get a reference to the map
//some code here to make pretty labels for the map controls...
var layerLabel; // layerLabel is a div element created via javascript
if(layer.layer.map == null) {
layer.layer.setMap(map);
} else {
layer.layer.setMap(null);
}
}
Don't need to invoke addDomListener(). Also note the API syntax:
addDomListener(instance:Object, eventName:string, handler:Function)
Also minor fix of syntax errors in someFunction as follows:
function someFunction() {
// var map; //assume map is initialised, I've just removed that code
var layers = [];
// see https://developers.google.com/maps/documentation/javascript/layers
//Create 1st layer
var exchangeslayer = new google.maps.KmlLayer(
'http://kml-samples.googlecode.com/svn/trunk/kml/kmz/simple/big.kmz',
{ suppressInfoWindows: true, preserveViewport: true
});
layers.push( {name: "Exchanges", layer: exchangeslayer} );
// ...
addCustomLayerControls(layers);
}