I have created a plotting system using the GoogleMaps Javascript API V3, which allows users to draw out and save polygons.
I have received a number of complaints concerning the autocompletion of plots as a result of accidentally doubleclicking while manually drawing out the points using the polygon drawing tool. I am therefore looking to disable this dblclick auto-complete function, so that plots will only complete once the user clicks on the first point again.
I have tried unbinding the dblclick event from the map, and attempted to stop propagation of the dblclick event by throwing an error on double click, as below (just to test the event call).
google.maps.event.addListener(map, 'dblclick', function(){
throw("stop");
});
this succeeds in stopping the zoom function on doubleclick, but autocomplete still occurs when dblclicking while plotting points (this listener is not triggered). I have even tried stopping the propagation of any doubleclick event on the whole page, all to no avail. Can anyone suggest either a way of unbinding this dblclick event, or an alternative solution to prevent the dblclick autocomplete?
I have searched through the API reference document and forums and have not been able to find a solution to this.
Add an edit button after finish!
Save your polygons into an array on "overlaycomplete" (and add your edit button at the same time)
var polyArray = [];
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
this.setDrawingMode(null);
var shape = e.overlay;
shape.type = e.type;
polyArray.push(shape);
shape.addListener('click', function(evt){
if (evt.vertex != null && this.getPath().getLength() > 3) {
this.getPath().removeAt(evt.vertex);
}
});
});
The Edit function:
function editFeature(id, action){
var shape = polyArray[id];
if(action) shape.setEditable(true);
else shape.setEditable(false);
}
Related
I'm using drawing manager to draw polygon.
I want to display live moving data on polygon vertex.
I have tried used two methods below.
google.maps.event.addListener(polygon.getPath(), 'set_at', processVertex);
google.maps.event.addListener(polygon.getPath(), 'insert_at',processVertex);
But its call after vertex end moving/ drag end.
i want something while moving ...
I have this fiddle and data i'm displaying.
http://jsfiddle.net/subhashchavda/6a8db64z/65/
I want something like this
listener(polygon.getPath(), 'vertex_drag',function(){
update_data(); /* dragging/moving */
});
Is there any way /trick for listen vertex dragging ?
There is no in build function available in google map doc. so right now if want to it to workout you can use custom code like listening vertax click and drag on map.
Here is some code you can try with that.
google.maps.event.addListener(polygon, 'mousedown', function(e){
if(e.vertex){
// flag for vertax drag start
}
});
google.maps.event.addListener(map, 'mousemove', function(e){
if(e.vertex){
// flag for vertax dragging
}
});
google.maps.event.addListener(polygon, 'mouseup', function(e){
if(e.vertex){
// flag for vertax drag stop
}
});
But i'm not sure it will work with every conditions.
you need to more workout with this code.
I'm creating a Google map with markers and infowindows. I'd like each infowindow to have a zoom button that causes the Google map to zoom in and center and the corresponding marker.
See this jsfiddle for an example. The code for the infowindow is relatively simple:
infoWindowArray[i] = new google.maps.InfoWindow({
position: latlng,
content: "<a href='/"+pitches[i].slug+".html'>"+pitches[i].name + " ("+ pitches[i].club+")</a><br /><img width='16' alt='Loupe' src='//upload.wikimedia.org/wikipedia/commons/thumb/4/48/Loupe.svg/32px-Loupe.svg.png'/> <a id='zoom_"+pitches[i].id+"' href='javascript:void(0)'>Zoom In</a>"
});
However, my script is very temperamental in Chrome, and in Firefox it always fails. The reason is because one click is somehow being fired twice. So this function:
function setupZoomListeners(object, title, google_position, map){
google.maps.event.addListener(object, 'domready', function() {
google.maps.event.addDomListener(document.getElementById("zoom_"+title), 'click', function(){
if (document.getElementById("zoom_"+title).innerHTML == "Zoom In"){
map.setCenter(google_position);
map.setZoom(14);
document.getElementById("zoom_"+title).innerHTML = "Zoom out";
} else {
map.setCenter(new google.maps.LatLng(53.5, -2.2));
map.setZoom(6);
document.getElementById("zoom_"+title).innerHTML = "Zoom In";
}
});
}
is zooming in and out because it hears two clicks, so the net effect is nothing. However, simply removing the img tag in the infowindow appears to solve all.
Is there any earthly reason why the presence of an img tag would cause the script to interpret one click as two? I've seen lots of cases where too many clicks are registered - what generally causes this?
Can anyone advise how to solve this? Thanks.
Its capturing your domready event twice (at least in my version of firefox 19.0.2). You can see that if you start your zoomListeners function like so:
function setupZoomListeners(object, title, google_position, map){
console.log('zoomListener');
google.maps.event.addListener(object, 'domready', function() {
console.log('domReady');
google.maps.event.addDomListener(...
I don't think domready is a good event to be using here. Personally, I would just use one infoWindow object and populate with different HTML when the marker is clicked.
In any case, domready wasn't intended to be used for subsets of the dom as you are doing. I believe it's firing every time you change your markup. So when the lines starting document.getElementById("zoom_"+title).innerHTML = ... are executed the domready event will fire once again.
I am working on a google maps application and tried to implement the autocomplete API.
It is working for 1 textfield.
Is it possible to add the same for the destinationfield without copying the code?
I added the listener as in the documentation
https://developers.google.com/maps/documentation/javascript/places
Here is the listener for the changed event,
but I don't know, if I can bind it for 2 textfields..
google.maps.event.addListener(autocompleteStart, 'place_changed', function() {
//...
)};
You may use the function multiple times, a simple implementation:
(function(o,e,f){
for(var i=0;i<o.length;++i){
google.maps.event.addListener(o[i],e,f);
}})([autocompleteStart,autocompleteEnd], //array with autocomplete-objects
'place_changed', //event-type
function(){/* do something*/} //handler-function
);
I have to make a map of Europe with its countries
and then I need a few pics of products from those countries
After that I have to match the pic with the country with drag and drop
if the product is dropped on the correct country it should send me to another page (with more info about the product)
if it's wrong it should display a message
anyone have an idea? I checked for some basic drag and drop stuff but since I'm new to html5 etc and webdesign in general it's really hard to make this from scratch
thanks!
EDIT: also only use HTML, CSS, JS
This can be achieved with the MapQuest JavaScript API. What I would start with is by adding polygon overlays to the map for each country, the colour can be sett to completely transparent by setting the opacity for the overlay to 0.0. From each overlay add a mouseup event listener to each overlay, this event listener can then be used to determine what it was you were dragging in the first place.
For the drag start functionality you can either do this yourself or you could use something like the jQuery UI draggable support, you could then use the dragstop event from the draggable API in conjunction with mouseup on the overlay to perform your logic.
Check out the basic map to get a map going.
Some code to start with
var countryCode;
// Adds an overlay and wires an event for mouseup.
function addMapOverlay(points, cc) {
var poly = new MQA.PolygonOverlay();
poly.setShapePoints(points);
poly.color = "#ffffff";
poly.colorAlpha=0.0;
poly.fillColor = "#ffffff";
poly.fillColorAlpha=0.0;
poly.addListener(rectangle, 'mouseup', function(evt) {
if (evt.eventName === "mouseup") {
// Here you have the event firing for the mouse-up on the overlay.
countryCode = cc;
}
});
}
For the drag-start.
$("#some-country-item").draggable({
start: function(event, ui) {
countryCode = null;
},
stop: function(event, ui) {
if (countryCode === "what you expected") {
// Released on correct country.
} else {
// Did not release on correct country.
}
}
});
You may need to test the event handling to ensure that the correct events are fired in the right order, or use the mouseover event on the overlay object.
The code samples are theoretical and should help you find the right direction to go.
I've been reading the Google Maps API docs to see if it's possible to tell the difference between a system event vs. a user one?
For example, the zoom_changed event gets triggered when you use methods like setZoom, fitBounds, etc, which in my implementation is unsavoury, as I just want to know when the user actually changes the zoom level.
Unfortunately, the click event is only fired on the map itself, not the controls, so you can't rely on that method to help detect the users input.
Ideas?
Although I haven't been able to solve this using the Google Maps API, I have created a workaround which involves me calling this method before I change the map zoom or positioning without user interaction:
MapGraph.prototype.systemMove = function() {
var _this = this;
this.isMoving = true;
return setTimeout(function() {
return _this.isMoving = false;
}, 500);
};
And my event bindings look like this:
google.maps.event.addListener(this.map, 'dragend', function(event) {
if (!_this.isMoving) return _this.mapChanged();
});
Not perfect, but it does work.
Would love to see any other implementations though.
You may also consider an alternate solution I proposed in this Stack Overflow answer, which does not rely on mouse events to recognize user-initiated changes.
Instead of trying to recognize user events, add a flag to the map whenever a programmatic change is initiated with setZoom or fitBounds.
map.systemChange = true
map.setZoom()
Then check for (and reset) the flag in the event listener.
map.addListener('zoom_changed', function () {
if (map.systemChange) {
map.systemChange = false // Reset the flag for a system-initiated event
} else {
// Handle the user-initiated event
}
});