I am simply trying to load three rectangular images and want them to align horizontally adjacent to each other. I thought setting the left property in fabric.Image.fromURL method would accomplish this but the tree images load stacked on top of each other. Also even though I include selectable:true, the images are not selectable. Am I using fabric.Image.fromURL incorrectly?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!-- Get version 1.1.0 of Fabric.js from CDN -->
<script src="js/fabric.js"></script>
<!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function () {
var canvas = new fabric.Canvas('canvas', {
backgroundColor: 'black',
selectionColor: 'blue',
selectionLineWidth: 0
// ...
});
debugger;
var tiles = [
"images/Green.png",
"images/Red.png",
"images/Yellow.png"
];
var offset = [
"0",
"200",
"400"
];
debugger;
for (i = 0; i < tiles.length; i++) {
fabric.Image.fromURL(tiles[i], function (img) {
img.scale(1.0).set({
left: offset[i],
top: 0,
selectable:true,
});
canvas.add(img).setActiveObject(img);
});
}
function handleDragStart(e) {
[].forEach.call(images, function (img) {
img.classList.remove('img_dragging');
});
this.classList.add('img_dragging');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'copy'; // See the section on the DataTransfer object.
// NOTE: comment above refers to the article (see top) -natchiketa
return false;
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over'); // this / e.target is previous target element.
}
function handleDrop(e) {
// this / e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
var img = document.querySelector('#images img.img_dragging');
console.log('event: ', e);
var newImage = new fabric.Image(img, {
width: img.width,
height: img.height,
// Set the center of the new object based on the event coordinates relative
// to the canvas container.
left: e.layerX,
top: e.layerY
});
canvas.add(newImage);
return false;
}
function handleDragEnd(e) {
// this/e.target is the source node.
[].forEach.call(images, function (img) {
img.classList.remove('img_dragging');
});
}
// Bind the event listeners for the image elements
var images = document.querySelectorAll('#images img');
[].forEach.call(images, function (img) {
img.addEventListener('dragstart', handleDragStart, false);
img.addEventListener('dragend', handleDragEnd, false);
});
// Bind the event listeners for the canvas
var canvasContainer = document.getElementById('canvas-container');
canvasContainer.addEventListener('dragenter', handleDragEnter, false);
canvasContainer.addEventListener('dragover', handleDragOver, false);
canvasContainer.addEventListener('dragleave', handleDragLeave, false);
canvasContainer.addEventListener('drop', handleDrop, false);
});
</script>
</head>
<body>
<div id="canvas-container">
<canvas id="canvas" width="600" height="200"></canvas>
</div>
<div id="images">
<img draggable="true" src="images/Red.png" width="50" height="50"></img>
<img draggable="true" src="images/Yellow.png" width="50" height="50"></img>
<img draggable="true" src="images/Green.png" width="50" height="50"></img>
</div>
</body>
</html>
There is a race condition between your fabric.Image.fromURL callback and the execution of the for loop, which prevents the images from showing.
If you print i and offset[i] inside your callback:
fabric.Image.fromURL(tiles[i], function (img) {
console.log(i, offset[i]);
...
});
you'll notice that i is 3 and offset[i] is undefined in all off the callbacks.
This happens because each of the callbacks retain a reference to the same instance of the i variable, and use its latest value at the time they execute. The for loop loops through its cycles, each time incrementing i, before any of your callbacks execute, leaving i with a final value of 3. When your callbacks execute, they try to set the left: value to offset[3], which is undefined, and fabric falls back to 0.
Solution
Variables in pre-ES6 javascript (unlike most languages) are only scoped to the function they are declared it, and code-blocks do not affect scope.
Place your image build logic into its own function, passing the current value of i as a parameter in each loop cycle. This will place the value into a new scope, and preserve the value.
Also, don't forget the var keyword in front of your i. Otherwise you're affecting the global namespace, which you want to avoid at all cost.
Here's what your code should look like:
for (var i = 0; i < tiles.length; i++) {
buildImage(i);
}
// creates a new scope for the passed in value of i when called:
function buildImage(i) {
fabric.Image.fromURL(tiles[i], function (img) {
img.scale(1.0).set({
left: offset[i],
top: 0,
selectable: true,
});
canvas.add(img).setActiveObject(img);
});
}
Finally, you may want to consider setting the originX and originY properties of the images, like so:
originX: 'left',
originY: 'top'
By default, fabric will use the center of the images as the point of origin when placing them, and your images will not be in full view of the canvas.
Update
Here is the fully working example. It is dependent on fabric, which needs to be placed in your js/ folder.
Related
I use simpleuploads plugin.
When images are uploaded i need add to parent of them a class.
This is HTML code wich is pasted after image upload process
<div><img src="link/to/image"><img src="link/to/image2"></div>
Now i need to add class to the 'div' element but i don't know how.
To remove height and width attributes of < img > elements i use this code:
<script>
CKEDITOR.on('instanceReady', function(e) {
e.editor.on( 'simpleuploads.finishedUpload' , function(ev)
{
var element = ev.data.element;
if (element.getName() == 'img')
{
var img = element.$;
img.removeAttribute('width');
img.removeAttribute('height');
ev.stop(); // Stop the event in case the listener is inserted twice
}
});
});
</script>
so will be great if someone can help me to add class using it.
This is the right code:
<script>
CKEDITOR.on('instanceReady', function(e) {
e.editor.on( 'simpleuploads.finishedUpload' , function(ev)
{
var element = ev.data.element;
if (element.getName() == 'img')
{
var img = element.$;
img.removeAttribute('width');
img.removeAttribute('height');
img.parentNode.setAttribute('class','classname');
ev.stop(); // Stop the event in case the listener is inserted twice
}
});
});
</script>
I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.
Here's a jsfiddle of my situation: Fiddle
The problems I am trying to fix are:
Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.
It would be great if I could center the modal within my window rather than the Window
Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.
If I click the 'X' to close the inner modal, it closes my external window.
Can anyone suggest solutions to any of these issues?
$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
modal: true,
resizable:false,
draggable:false,
appendTo: '#Window',
close: function() {
setTimeout(function(){
$('#confirmWindow').kendoWindow('destroy');
}, 200);
}
});
$('#confirmWindow').find('#btnNo').click(function () {
$('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
$('#confirmWindow').kendoWindow('close');
});
Edit
I have edited the fiddle as the first one was an older version of what i meant to post.
From appendTo documentation:
The element that the Window will be appended to. Note that this does not constrain the window dragging within the given element.
So, Kendo windows are floating, they are not constrained to the element that you append it to. This means that does not make sense prepend the confirmation window to an HTML element and then append it to that same element.
Check response from a telerik enginer
http://www.kendoui.com/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx
<script type="text/javascript">
$(document).ready(function () {
$("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {
var wnd = $("#window").data("kendoWindow");
var position = wnd.wrapper.position();
var minT = 0;
var minL = 0;
//Get the Window width and height and
//place them in position of the hard-coded width and height
var maxT = 600 - wnd.wrapper.height();
var maxL = 900 - wnd.wrapper.width();
if (position.left < minL) {
coordinates = { left: minL };
$(wnd.wrapper).css(coordinates);
}
if (position.top < minT) {
coordinates = { top: minT };
$(wnd.wrapper).css(coordinates);
}
if (position.left > maxL) {
coordinates = { left: maxL };
$(wnd.wrapper).css(coordinates);
}
if (position.top > maxT) {
coordinates = { top: maxT };
$(wnd.wrapper).css(coordinates);
}
})
})
</script>
for a service providers website I am using the code below (stole it from here) to display a map and draw areas each provider covers. How can i return and store the arrays of latitudes/longitudes of each shape i draw? i need to save it into database so later i can use for search queries when searching for providers within a certain area.
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function selectColor(color) {
selectedColor = color;
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
}
// Retrieves the current options from the drawing manager and replaces the
// stroke or fill color as appropriate.
var polylineOptions = drawingManager.get('polylineOptions');
polylineOptions.strokeColor = color;
drawingManager.set('polylineOptions', polylineOptions);
var rectangleOptions = drawingManager.get('rectangleOptions');
rectangleOptions.fillColor = color;
drawingManager.set('rectangleOptions', rectangleOptions);
var circleOptions = drawingManager.get('circleOptions');
circleOptions.fillColor = color;
drawingManager.set('circleOptions', circleOptions);
var polygonOptions = drawingManager.get('polygonOptions');
polygonOptions.fillColor = color;
drawingManager.set('polygonOptions', polygonOptions);
}
function setSelectedShapeColor(color) {
if (selectedShape) {
if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
selectedShape.set('strokeColor', color);
} else {
selectedShape.set('fillColor', color);
}
}
}
function makeColorButton(color) {
var button = document.createElement('span');
button.className = 'color-button';
button.style.backgroundColor = color;
google.maps.event.addDomListener(button, 'click', function() {
selectColor(color);
setSelectedShapeColor(color);
});
return button;
}
function buildColorPalette() {
var colorPalette = document.getElementById('color-palette');
for (var i = 0; i < colors.length; ++i) {
var currColor = colors[i];
var colorButton = makeColorButton(currColor);
colorPalette.appendChild(colorButton);
colorButtons[currColor] = colorButton;
}
selectColor(colors[0]);
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
var polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
}
});
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
buildColorPalette();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
any help would be appreciated.
Thank you
This is something you need.
I tested it and it works very well.
Just copy and then enjoy it.
<html>
<!--Here you will create a polygon by tools that Google maps "drawingManager" gives to you and then you have an array named "coordinates" as an output. This array saves all latLng of the polygon. When you edit the polygon it also edit this variable too.
!-->
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing"></script>
<!--Global variables!-->
<script>
//This variable gets all coordinates of polygone and save them. Finally you should use this array because it contains all latitude and longitude coordinates of polygon.
var coordinates = [];
//This variable saves polygon.
var polygons = [];
</script>
<script>
//This function save latitude and longitude to the polygons[] variable after we call it.
function save_coordinates_to_array(polygon)
{
//Save polygon to 'polygons[]' array to get its coordinate.
polygons.push(polygon);
//This variable gets all bounds of polygon.
var polygonBounds = polygon.getPath();
for(var i = 0 ; i < polygonBounds.length ; i++)
{
coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng());
alert(i);
}
}
</script>
<script>
function initialize()
{
//Create a Google maps.
var map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)});
//Create a drawing manager panel that lets you select polygon, polyline, circle, rectangle or etc and then draw it.
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
//This event fires when creation of polygon is completed by user.
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
//This line make it possible to edit polygon you have drawed.
polygon.setEditable(true);
//Call function to pass polygon as parameter to save its coordinated to an array.
save_coordinates_to_array(polygon);
//This event is inside 'polygoncomplete' and fires when you edit the polygon by moving one of its anchors.
google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
alert('changed');
save_coordinates_to_array(polygon);
});
//This event is inside 'polygoncomplete' too and fires when you edit the polygon by moving on one of its anchors.
google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
alert('also changed');
save_coordinates_to_array(polygon);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="width:1024px; height:768px;" id="map"></div>
</body>
</html>
I have a Bing Map in which I have a set of pushpins, with InfoBoxes associated with each one. I am using v7.
I'd like have a link that is outside the map to display a particular pushpin's Infobox. How can this be done?
example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/* Define a style used for infoboxes */
.NSIMInfoBox
{
position: absolute;
border: solid 2px black;
background-color: White;
z-index: 1000;
padding: 5px;
width: 250px;
visibility: visible;
}
#mapDiv
{
position: relative;
top: 20;
left: 20;
width: 800px;
height: 800px;
border: solid 2px #555;
}
</style>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</script>
<script>
$(document).ready(function () {
getMap();
});
var pinInfobox = null;
var map;
var pin;
function getMap() {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{ credentials: "apikey",
center: new Microsoft.Maps.Location(45.5, -122.5),
zoom: 10,
showScaleBar: true,
mapTypeId: Microsoft.Maps.MapTypeId.road
});
// //Multiple locations
// var polygonWithPins = new Microsoft.Maps.EntityCollection();
var loc1 = new Microsoft.Maps.Location(45.5, -122.5);
var loc2 = new Microsoft.Maps.Location(45.6, -122.5);
pin = new Microsoft.Maps.Pushpin(loc1);
//Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);
pin.setInfoBox(new InfoBox("<strong>Pushpin Number1!</strong>"));
map.entities.push(pin)
var pin2 = new Microsoft.Maps.Pushpin(loc2);
pin2.setInfoBox(new InfoBox("<strong>Pushpin Number 2!</strong>"));
map.entities.push(pin2)
}
function InfoBox(html) {
this.div;
this.html = html;
}
InfoBox.prototype.show = function (e) {
if (this.div == undefined) {
//Create container div
this.div = document.createElement("div");
this.div.className = "NSIMInfoBox";
this.div.innerHTML = createInfoBox(this.html);
this.div.style.display = "";
var mapDiv = document.getElementById('mapDiv');
mapDiv.appendChild(this.div);
}
var pinLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
this.div.style.left = pinLocation.x + "px";
this.div.style.top = pinLocation.y + "px";
this.div.style.visibility = "visible";
this.div.style.display = "block";
};
InfoBox.prototype.hide = function (e) {
if (this.div != undefined) {
this.div.style.visibility = "hidden";
}
};
//Extend pushpinclass
Microsoft.Maps.Pushpin.prototype.setInfoBox = function (infoBox) {
if (typeof this.infoBox != undefined && this.infoBox != undefined && this.infoBox != null) {
this.removeInfoBox();
}
// Add handlers for mouse events
this.mouseoverHandler = Microsoft.Maps.Events.addHandler(this, 'click',
function (e) { infoBox.show(e); }
);
this.mouseoutHander = Microsoft.Maps.Events.addHandler(this, 'mouseleave',
function (e) { infoBox.hide(e); }
);
};
// Extend the Pushpin class to remove an existing InfoBox object
Microsoft.Maps.Pushpin.prototype.removeInfoBox = function () {
this.infoBox = null;
// Remove handlers for mouse events
Microsoft.Maps.Events.removeHandler(this.mouseoverHandler);
Microsoft.Maps.Events.removeHandler(this.mouseoutHander);
}
function createInfoBox(html) {
var myHtml;
myHtml = '<div style="text-align:right; margin-right: 5px;" onclick="closeInfoBox();">x</div>' +
'<div style="padding: 5px;">' + html + '</div>';
return myHtml;
}
function closeInfoBox() {
$('.NSIMInfoBox').hide();
}
</script>
</head>
<body>
<div id="mapDiv" class="map"></div>
<span class="click">click me! - HERE I WANT TO SHOW THE FIRST PIN'S INFOBOX</span>
</body>
</html>
This is how I was able to solve this problem -
Since I pushed the pins into the EntityCollection, I was able to reference the pushpin by parsing through the collection, then calling the invoke method in order to get the result I was looking for:
Sample:
var newpin = map.entities.get(i);
Microsoft.Maps.Events.invoke(newpin, 'click', '');
I haven't tried this, but I would hope it can work. Essentially you can simulate the mouse events over a pushpin object.
First, when creating a pushpin, be sure to set a class name on the resulting by setting the typeName property on the pushpin options object. This will allow you get hold of the resulting div by using the css selector #mapDiv div..
Then you can create an event and dispatch it on the div, which will indicate to the map control that it should show the information associated with the pushpin. Since you're using jQuery, I think it would be something along the lines of (in response to the click event on your link that is outside the map control):
// assuming the typeName you used was "foo"
$('#mapDiv div.foo').trigger($.event('mousemove'));
You might have to try issuing mouseover before/instead of the mousemove. Also this is a general idea of a potential approach ... hopefully it yields in a solution.
I have problem with Firefox6 (don't know if it also concerns earlier versions).
I want to embed Google Map on page, and when page has scrollbars (is longer than viewport) mouse wheel not only zooms map but also scrolls page. I tried to catch mousewheel event and stop propagation but this event isn catchable when cursor os over map. When cursor is over map controls (zoom control, google logo, etc) i can catch event and stop propagation.
What is more strange it not happens always. Sometimes page srolls and after few scrolls it stops and mousewheel only zooms map (as expected). Sometimes page doesn't scroll and sometimes it scrolls with zoom all the time. Can't find pattern.
Source code is simple:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function(){
var latlng = new google.maps.LatLng(52.25, 21.01);
mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
zoomControl:true,
mapTypeControl:false
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
</script>
</head>
<body>
<p style="height:500px;">-lot of text-</p>
<div id="map_canvas" style="width:500px; height:500px;"></div>
<p style="height:500px;">-lot of text-</p>
</body>
</html>
Your problem is also described on code.google.com, this problem is only in Firefox, but it isn't a Firefox bug:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3652
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1605
Have also found out a workaround, that is not re-scrolling or re-zooming and works fine:
A new ScrollInterceptOverlay derived from google.maps.OverlayView, prepending a div on MapPanes.overlayMouseTarget:
Version with jQuery
// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map($googlemap[0], mapOptions);
// Define a ScrollInterceptOverlay function
var ScrollInterceptOverlay = function (gmap) {
if (!(this instanceof ScrollInterceptOverlay)) return;
var $div;
var $mapDiv;
var initialize = function () {
$div = $('<div />').css({
position: 'absolute', top: 0, left: 0,
display: 'inline-block'
});
var div = $div[0];
if (div && div.addEventListener) {
// Internet Explorer, Opera, Google Chrome and Safari
div.addEventListener("mousewheel", mouseScrollStop);
// Firefox
div.addEventListener("DOMMouseScroll", mouseScrollStop);
div.addEventListener("MozMousePixelScroll", mouseScrollStop);
}
else if (div && div.attachEvent) { // IE before version 9
div.attachEvent("onmousewheel", mouseScrollStop);
}
this.setMap(gmap);
};
var mouseScrollStop = function (e) {
if (e && e.preventDefault) e.preventDefault();
};
this.onAdd = function () {
$div.prependTo(this.getPanes().overlayMouseTarget);
};
this.onRemove = function () {
var div = $div[0];
if (div && div.addEventListener) {
// Internet Explorer, Opera, Google Chrome and Safari
div.addEventListener("mousewheel", mouseScrollStop);
// Firefox
div.addEventListener("DOMMouseScroll", mouseScrollStop);
div.addEventListener("MozMousePixelScroll", mouseScrollStop);
}
else if (div && div.attachEvent) { // IE before version 9
div.attachEvent("onmousewheel", mouseScrollStop);
}
$div.detach();
};
this.draw = function () {
if ($mapDiv && $mapDiv.length === 1) {
$div.css({
width: $mapDiv.outerWidth(),
height: $mapDiv.outerHeight()
});
}
};
var base_setMap = this.setMap;
this.setMap = function (map) {
$mapDiv = $(map.getDiv());
base_setMap.call(this, map);
};
initialize.call(this);
};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();
// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay(gmap);
This workaround is using jQuery, required for calculating outerWidth and outerHeight, but also for better reading.
Version with pure javaScript
Tested live: http://fiddle.jshell.net/fhSMM/7/
// Ensure to have google.maps loaded:
// var gmap = new google.maps.Map(googlemap, mapOptions);
// Define a ScrollInterceptOverlay class function
var ScrollInterceptOverlay = function () {
if (!(this instanceof ScrollInterceptOverlay)) return;
var div;
// private instance function
var mouseScrollStop = function (e) {
if (e && e.preventDefault) e.preventDefault();
};
// public instance function
this.onAdd = function () {
div = document.createElement('div');
div.style.display = 'inline-block';
div.style.position = 'absolute';
div.style.top = div.style.left = 0;
if (div.addEventListener) {
// Internet Explorer, Opera, Google Chrome and Safari
div.addEventListener("mousewheel", mouseScrollStop);
// Firefox
div.addEventListener("DOMMouseScroll", mouseScrollStop);
div.addEventListener("MozMousePixelScroll", mouseScrollStop);
}
else if (div.attachEvent) { // IE before version 9
div.attachEvent("onmousewheel", mouseScrollStop);
}
var pane = this.getPanes().overlayMouseTarget;
var firstChild = pane.firstChild;
if (!firstChild) {
pane.appendChild(div);
}
else {
pane.insertBefore(div, firstChild);
}
};
// public instance function
this.onRemove = function () {
if (div) {
if (div.removeEventListener) {
// Internet Explorer, Opera, Google Chrome and Safari
div.removeEventListener("mousewheel", mouseScrollStop);
// Firefox
div.removeEventListener("DOMMouseScroll", mouseScrollStop);
div.removeEventListener("MozMousePixelScroll", mouseScrollStop);
}
else if (div.detachEvent) { // IE before version 9
div.detachEvent("onmousewheel", mouseScrollStop);
}
var parent = div.parentNode;
parent.removeChild(div);
}
// do not delete div var'iable
div = undefined;
};
// public instance function
this.draw = function () {
var map = this.getMap();
if (map) {
var mapDiv = map.getDiv();
if (mapDiv) {
var rect = mapDiv.getBoundingClientRect();
div.style.width = rect.width + 'px';
div.style.height = rect.height + 'px';
}
}
};
};
// Setup prototype as OverlayView object
ScrollInterceptOverlay.prototype = new google.maps.OverlayView();
// Now create a new ScrollInterceptOverlay OverlayView object:
var mapScrollInterceptor = new ScrollInterceptOverlay();
mapScrollInterceptor.setMap(gmap);
Please visit also http://metadea.de/V/ about what (real) javaScript class functions are, and why I like jQuery :)
Works now for me.
Also in Firefox, the map is zooming on mousescroll, but no more scrolling the document.
Edit: Updated support for MozMousePixelScroll, refined jS
For now it looks like firefox bug. Will close question when bug will be fixed.
I had the same issue.
You could try to start Firefox with a brand new profile (e.g. by starting the Profile Manager - executing 'firefox -P' on windows systems - and choosing 'Create...') and see if the problem persists.
I had several old but seemingly empty user profiles lying around in the VMs I used to verify if this was a bug in FF 6 and obviously installing only the new binaries didn't help. On the other hand, creating a blank profile did, so I can only think of this being a migration glitch. If major versions of FF are going to be released on a bi-monthly basis, though, a lot of people are going to suffer from similar issues.
Why not take UI control of zooming? This works well for me.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="canvas" style="width:600px;height:400px;"></div>
<script>
// Load event
$(function() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('.canvas')[0], myOptions);
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
// Only a Mozilla bug
if($.browser.mozilla) {
// Wait for the map DOM to be ready
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.canvas > div > div:first-child > div').bind('DOMMouseScroll', function(e) {
// setTimeout needed otherwise the return false has no effect
setTimeout(function() {
// Calculate new center
var offset = $('.canvas').offset();
var pos = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX-offset.left, e.pageY-offset.top));
// Calculate new zoom level
var zoom = map.getZoom();
if(e.detail < 0) zoom++;
else if(e.detail > 0) zoom--;
map.setCenter(pos);
map.setZoom(zoom);
}, 1);
// Stop propagation (prevent default)
return false;
});
});
}
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>