I have a map loaded and a listener:
map = new google.maps.Map(document.getElementById('mapdiv'),opts);
google.maps.event.addListener(map,'mousemove',function(event) {...
All fine. And I also have a mouse click event being captured to relay coordinates to a database.
But I've added waypoints to the map
for (var wp in waypoints) {
var wpOptions = {strokeColor: waypoints[wp].clr,strokeOpacity: 0.5,strokeWeight: 2,fillColor: waypoints[wp].clr,
fillOpacity: 0.1,map: map,center: waypoints[wp].center,radius:waypoints[wp].sz
};
wpCircle = new google.maps.Circle(wpOptions);
But some of the circles (wpCircle) can cover quite a large area - this stops the mouse move and click events. Is there any way to make the circles invisible to the mouse movement so the mouse responds to the underlying map and ignores the objects that have been laid on?
Many thanks
Kevin
Whoops happened again. Found the answer and was looking too deeply.
clickable:false
for (var wp in waypoints) {
var wpOptions = {strokeColor: waypoints[wp].clr,strokeOpacity: 0.5,strokeWeight: 2,fillColor: waypoints[wp].clr,
fillOpacity: 0.1,map: map,center: waypoints[wp].center,radius:waypoints[wp].sz,clickable: false
};
This is perfect now.
Thanks anyway
Kevin
Related
I'm working on a WordPress plugin where users can build a route map and show it on their site. In the admin panel it shows a preview of the existing route on the map, and also a marker they can drag to a new location that they want to add to the map.
The default zoom location for the map is set in Europe. But if they for example add a few stops in Australia, then only that part of the world is visible and you won't see the draggable icon anymore that is used to specify new locations, and that is a problem.
So I thought of fixing it with fitbounds, so it would always make the draggable marker and the already created route fit on the screen. The code I have does show all the locations on the map, but because I draw polylines between the visited locations, it somehow also draws a line to the draggable marker in Europe, which it shouldn't do because it's not part of the route.
You can see an example here -> http://jsfiddle.net/tijmen/HctvT/1/
Part of the code:
/* Draw lines between the markers */
function drawFlightPlan( flightPlanCoordinates ) {
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#ad1700",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap( map );
fitBounds( flightPlanCoordinates );
}
/* Zoom the map so that all markers fit in the window */
function fitBounds( flightPlanCoordinates ) {
var bounds = new google.maps.LatLngBounds ();
/* Include this latlng value in europe, but I dont want a line going to that latng... */
var defaultLatlng = new google.maps.LatLng('52.378153', '4.899363');
flightPlanCoordinates.push( defaultLatlng );
for ( var i = 0, flightPlanLen = flightPlanCoordinates.length; i < flightPlanLen; i++ ) {
bounds.extend ( flightPlanCoordinates[i] );
}
map.fitBounds( bounds );
}
The lines between the markers in Australia are fine, but the line to Europe shouldn't be there (normally there would just be a different colored marker in Europe).
I don't really understand why there is a line going to Europe in the first place. The flightPath.setMap( map ); is run inside the drawFlightPlan function. And it's not untill the fitBounds function is that I add the latlng value for Europe to the flightPlanCoordinates array.
I searched for a way to remove a partial polyline, but I can't find anything about it that works. I know how to remove all the markers or polylines, but not a single polyline part. Is that even possible?
Any ideas or suggestion how to fix this, or is this something that cannot be fixed the way I want to?
initialize bounds with the LatLng in europe instead of pushing this LatLng into flightPlanCoordinates
http://jsfiddle.net/doktormolle/HctvT/4/
When you use a reference to an array as path for a polyline any changes to the array will affect the polyline.
I'm in a bit of a pickle here. I've set up a google maps object that shows airport locations using markers. I've even enabled clustering to a certain extent. The thing is that I need to include a filter which would allow users to:
Filter and show certain types of airports i.e by clicking on a corresponding check box
SHow markers within a certain distance from a central point. Like show all markers within a radius of # miles. A user can enter a value in a text field to see this or use a slider control.
I'm quite stuck with respect on starting this out - I need some help on this.
What you can do is draw your circle (in response to user input). Then draw the markers that fall within that bounds. Each time you redraw the circle, also redraw all the markers.
// draw a circle of appropriate radius
var circleOptions = {
center: destinationLatlng,
radius: 500, // or value from some formfield, in metres
fillColor: "#FF0000",
fillOpacity: 0.2,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 1
};
var circle = new google.maps.Circle(circleOptions);
var bounds = circle.getBounds();
// loop over your markers, and only draw the ones that are within these bounds
for (var i = 0; i < arrMarkers.length; i++) {
if (bounds.contains(arrMarkers[i].getPosition())) {
// only do setMap if the marker wasn't already visible
if (arrMarkers[i].getVisible() != true) {
arrMarkers[i].setMap(map);
arrMarkers[i].setVisible(true);
}
} else {
// remove the ones that are not within the circle's bounds
arrMarkers[i].setMap(null);
arrMarkers[i].setVisible(false);
}
}
You'll notice I do both setMap and setVisible. This is so that I can then use getVisible to determine if I need to redo setMap (so avoiding unnecessary function calls to setMap - I think I had an issue with flickering).
All this should be within a function that happens in response to user input, e.g. when they submit the form that asks for the radius (or as they slide the slider). This should also maybe be called from within your initialize function (if you want to draw a circle at the very start as well).
Of course this assumes you actually want to display a circle on your map showing that radius; I find this useful. However if you don't, you can use exactly the same message, but just set the fillOpacity and strokeOpacity to 0.0.
Organize references to markers into categories when you add it to map:
var markers = { cat1: [...markers...], cat2: [...markers...] }
When user selects cirtain type - just set or unset map for that markers in markers.catN
Is there a way to disable drag inertia on Google Maps V3? Seems like it should be a MapOption, but I can't find any way to do this.
I ran into this same problem today, with some custom Div's floating above the map needing to be re-positioned on Map Movement. My repositioning worked fine as long as the user came to a complete stop after dragging before letting the mouse go (so there would be no momentum), but if one just dragged quickly and released the div's would end up a bit off.
To fix this, I hooked into the drag event and the idle event:
var map = /* All the map config */
var stickyCenter = map.getCenter();
/* ... Code ... */
google.maps.event.addListener(map, 'drag', function(){ stickyCenter = map.getCenter(); });
google.maps.event.addListener(map, 'idle', function() { map.setCenter(stickyCenter); });
What happens is that after you've dragged and the map has come to a stop (after the momentum is done) the map 'snaps' back into place.
If the snapping is too sudden, one could probably panTo or animate the movement in some way. Hope that helps, it's not perfect, but it's a way to reverse the momentum from a drag event.
Use the undocumented option disablePanMomentum e.g.:
new google.maps.Map(document.getElementById(id), {
disablePanMomentum: true,
backgroundColor: 'none',
disableDefaultUI: true,
center: {
lat: 40.674,
lng: -73.945
},
zoom: 2,
...
This cannot be done with Maps API V3 at this time. Consider filing a feature request here:
http://code.google.com/p/gmaps-api-issues/
I'm pretty sure it's possible to at least counter-act the momentum. Somebody please correct me if I'm wrong! For the sake of simplicity, for instance, let's say your map container has a width of 100vw and a height of 100vh. You simply call getCenter() in a function that is called by a mouseup event, and then use those coordinates to immediately setCenter()?
function initMap(){
...
var win = window;
google.maps.event.addDomListener(win, 'mouseup', setCoords);
function setCoords(){
var x = myMap.getCenter();
var lat = x.lat();
var lng = x.lng();
myMap.addListener('center_changed', function(lat, lng){
myMap.setCenter(new google.maps.LatLng(lat, lng));
};
};
The code above actually works, but the kicker is that it only works once until the browser becomes seemingly overloaded and produces the error Uncaught RangeError: Maximum call stack size exceeded.
Not sure what to do now.
More info about this here.
This one works just fine for me:
map.addListener("dragend", () => map.setCenter(map.getCenter()));
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.
i am using GoogleMaps and i have 2 or more markers and they are draggable.
I want to snap 2 markers if they are near and merge them into 1.
is this possible ?
Can someone give me pointers .. how i can realize that ?
You need to handle the drag event on the GMarker object. The trick is what do you do when you detect that you are near enough to another marker to snap them together. I played around a little with this and thought maybe hiding the currently dragged marker might be a good way to go.
GEvent.addListener(marker, "drag", function(point) {
// iterate over your points and for each otherPoint...
if (near (point, otherPoint))
{
// hide this marker
marker.hide ();
// move nearby marker to indicate merge?
// then delete the dragged marker on the dragend (if it was merged)
}
}
Not an entirely elegant solution, but it might suit your purposes.
Edit: I wondered if you were looking for the code to check nearby points, so I updated my example to do that:
function near (point1, point2)
{
sw = new GLatLng(point2.lat() - 0.005, point2.lng() - 0.005);
ne = new GLatLng(point2.lat() + 0.005, point2.lng() + 0.005);
var bounds = new GLatLngBounds(sw, ne);
if (bounds.contains (point1))
return true;
return false;
}