I have a map which has polygons defining various locations.
I am trying to trigger an infowindow when the pointer mouses over the polygon, and then remove it when the mouse leaves. i have center coordinates for the polygons, and there is no marker.
All of the infowindow examples I found are based on having a marker point.
How can I acheive this without a marker?
You can attach the infoWindow creation to the polygon mouseover event. Then have the window close when the user mouses out. Something like this:
google.maps.event.AddListener("mouseover", polygon, function() {
infoWindow.setPosition(latLng)
infoWindow.open(map)
})
google.maps.event.AddListener("mouseout", polygon, function() {
infoWindow.close()
})
Related
I have a website at http://arquitectospelomundo.com which displays several markers, combined by the markerclusterer function, which display, when clicked, an infowindow with some info. When clicking directly on the map, the info window appears on the right spot; but when clicking on the sidebar (on one of the pictures), the info window goes out of bounds.
This was working correctly and suddenly changed; I am trying to figure it out but so far with no success. I would appreciate any help pointing me in the right direction.
Thank you.
As it seems the issue is related to the MarkerClusterer.
When the marker where the click has been triggered is inside a cluster the map-property of the marker is null and you get the wrong position.
Possible solution:
When the marker is within a cluster use a hidden marker(hidden via visible) as anchor for the infoWindow:
google.maps.event.addListener(marker, 'click', function() {
//create the dummy-marker on first click
if(!map.get('dummy')){
map.set('dummy',new google.maps.Marker({map:map,visible:false}))
}
var latLng = marker.getPosition();
//when the marker is within a cluster
if(!marker.getMap()){
//set position of the dummy
map.get('dummy').setPosition(latLng);
//use dummy as infowindow-anchor
marker= map.get('dummy');
}
map.panTo(latLng);
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
I had the same problem with Marker clusterer and outside clicks to the map, opening infowindows. The solution by #Dr.Molle with dummy markers is a nice direction, but the problem is that you can use the dummy to pan to, but the listener triggers a click on the marker which is not on the map. The correct infowindow opens, but the autopan feature has no way of knowing where to pan to, so it stays where it was after the last click. This is a problem with repeated clicks from outside the map. The first click goes okay, but the second or third one goes wrong, depening on if it was in a cluster or not.
The solution I found tests if the marker is in a cluster, if yes, attaches it to the map, and removes it after the click (not sure if that is neccessary, maybe to prevent the map from getting slow). I put it in the function that is called with each click from outside. But maybe you can also build it into the event listener. This works perfectly for me:
function openInfoWindow(id){
googlemap.setZoom(13);
var marker = markers[id];
var latLng = marker.getPosition();
if(!marker.getMap()){ //if the clicked marker is in a cluster, so it is not attached to a map
marker.setMap(googlemap); //attach it to the map
google.maps.event.trigger(marker, 'click'); // the standard trigger, opens infowindow
googlemap.panTo(latLng);
marker.setMap(null); //detach it from the map (not sure if necessary
} else {
google.maps.event.trigger(marker, 'click');
googlemap.panTo(latLng);
}
return false;
}
I have a Google map that I am using to allow people to suggest locations. Currently I position a draggable marker in the centre of the map using a LatLng created with
myPosition = frmMap.getCenter();
What I would like to do though is place it initially somewhere to the edge of the map, perhaps directly under the zoom control (not unlike the way you see the yellow street view man above the zoom control).
I've searched for a solution but am not coming up with anything. My only idea was to do some maths based on the Center and NortEast but I'd rather have an absolute position based on pixels if that's possible?
As I mentioned in the comments, computing a latlng value for a marker to position under the zoom controls is not only cumbersome, but might not be feasible if the user starts panning/zooming around in the map (as the marker will move wherever the latlng takes it).
My suggestion would be to use the Drawing Library provided by the Maps API. This basically gives you a drawing control, to add markers to the map (other overlays are possible too: cirlce, polygon, polyline, rectangle). And like any control google maps provides, you can strictly position them anywhere you'd like - by setting it in the options. The snippet below describes how you initialize the drawing library:
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM,
drawingModes: [
google.maps.drawing.OverlayType.MARKER
]
}
});
drawingManager.setMap(map);
This gives you your drawing control, with the mode for Marker enabled, and binds it to your map object.
You can then listen to when a marker's been added by adding a listener on the drawingManager variable for the markercomplete event. Then in the call back you can get the position of the added marker, the snippet below demonstrates this:
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
var position = marker.getPosition();
});
I put together a small jsfiddle with this example if you'd like to see it in action. Also, click here for full reference of the Drawing Library for the maps api.
EDIT: (start mode in marker add on map load, hide drawing controls after marker added, maker marker draggable)
To start the drawing mode to add marker on map load, simply set the drawingMode option in your drawingManager variable declaration:
`drawingMode : google.maps.drawing.OverlayType.MARKER`
You can hide the drawing controls in the markercomplete event listener:
// To hide:
drawingManager.setOptions({
drawingControl: false //changes UI back to regular map interactions
});
drawingManager.setDrawingMode(null); //hides controls
Alternatively, if you're never going to need the drawing controls again later in your client interactions you can remove it from the map complete via:
drawingManager.setMap(null);
Then to make the marker draggable, just set the option in the listener as well (because the marker in the callback function is a google maps marker object anyway - which references the marker that's added to your map).
marker.setOptions({
draggable: true
});
You can then add a listener on the marker object for the dragend event to track changes to the location.
Here's in updated fiddle: http://jsfiddle.net/svigna/J5zMg/3/
Is it possible to both open and infowindow and draw the route between a 'home' marker and the marker clicked?
What I've got is multiple markers on a map with a 'home' marker. I'd like to have the route drawn on the map from this 'home' marker to the marker clicked.
What you want is an event listener on your markers for the click event. Within that, use the DirectionsService to draw your route.
I am creating a map which returns the LatLng by pixel on screen, therefore I need a OverlayView implemented within the map. Unfortunately with the OverlayView, there is an issue after zoom in or out. When dragging the map after zoom, it does return me a new LatLng, but the screen is still showing the same location.
I am not sure how to fix it but the issue will gone once I pan the map with the pan control, then I could drag the map no matter the zoom level.
can anybody give me an advise?
Thanks,
Nick
To fix this issue, just call panTo function in the "zoom_changed" event.
google.maps.event.addListener(mymap, "zoom_changed", function() {
mymap.panTo(mymap.getCenter());
});
The map may not move smoothing because the panTo function is only called by zoom_change event unfortunately, so just call the panTo function after the map is initialized. Then the map could be moving around and different zoom level.
Basically I don't want the map to start automatically panning when someone is dragging a marker. Today, whenever someone drags a marker near the map edge, the map starts panning, panning even continues when they are outside the boundaries of the map canvas.
Pretty sure this "auto" panning is the default for any map (Google javascript Maps API 3.x) that has draggable markers and "normal" panning capabilities.
I want to keep the ability to pan the map with the mouse but I need to disable the "auto" panning that occurs when someone is dragging a marker near the edges of the map. (also need to keep draggable markers).
Thanks in advance.
Use the dragstart and dragend events of the marker to switch on and off the draggable property of the map. The map object does not have a setDraggable method so you need to use the set method.
google.maps.event.addListener(marker, 'dragstart', function(){
map.set('draggable', false);
});
google.maps.event.addListener(marker, 'dragend', function(){
map.set('draggable', true);
});