I am using angular-gm.js. I have created a customized marker and was able to open info window .I am looking for some examples where I can change infowindow to open left , right based on google marker position on either top left or bottom right. For now info window opens on top of marker by default
An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. By default the infowindow will open on the top of the marker(if attached to a marker), but you can use the pixeloffset to move the infowindow in relation to the marker.
from the docs:
"pixelOffset contains an offset from the tip of the info window to the location on which the info window is anchored. In practice, you should not need to specify this field. You can leave it at the default value."
var infowindow = new google.maps.InfoWindow({
content: contentString,
pixelOffset: new google.maps.Size(100,0)
});
The above causes the infowindow to open to the 100 pixels to the right of the marker. For more info on these properties of the infowindow please check out the documentation here:
https://developers.google.com/maps/documentation/javascript/infowindows
I hope this helps!
Related
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/
Does anyone know how to create a custom Google Maps infoWindow That will just open and fill over the map completely, instead of paning the map and setting the bubble over the marker? Basically, what I'd like to do is have my markers on the map, then when a user clicks on a marker, it just opens the content in a panel that fits the entire map itself. I looked at the options mentioned here: link but none of these seem to do what I'd like, they still open a "bubble" type of window. Has anyone done this or can someone point me in the right direction?
Creating your custom info window is not so difficult, but it's a little bit complicated.
If you want to find the easiest way, I recommend InfoBubble library.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
If you want to just prevent map panning when the infoWindow open, you can specify an option:
var infoWnd = new google.maps.InfoWindow({
disableAutoPan : true
});
I am using the Maps API (v3, javascript) to display a bunch of local properties for sale on this client's website. When the user mouses over a marker, it loads an infoWindow with property information. Problem is, when this is down near the edge of the map, it pans the map to show the info window, which can cause issues when lots of markers are close by.
So I added disableAutoPan: true to the infoWindow call, and it seems to solve the problem. However, after some more testing, if the user manually moves the map and then hovers over a marker, the resulting infoWindow pans the map. It's like it's ignoring the setting for the infoWindow.
Anyone else have this issue or any ideas how to solve it? The code I used to call the infoWindow is below:
infoWindowAjax = new google.maps.InfoWindow({
disableAutoPan: true,
maxWidth: '260'
});
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!
I'm running into a little problem with my infowindows: when a marker
is close enough to the edge of the map that the map needs to pan to
display the full infowindow, it does so but not enough to allow for a
few pixels of space between the infowindow and the border of the map.
Technically this works because content is made visible but it looks
awful.
Any ideas on how to make the infowindow have a margin?
marker = new GMarker(new GLatLng(this.latitude,this.longitude));
map.addOverlay(marker);
marker.openInfoWindow(this.infoWindow());
But this shows correctly if I use
map.openInfoWindow(marker.getLatLng(),this.infoWindow());
Now how can I make the infowindow anchor starts from top of the Marker not from bottom?
This happens automatically in google maps so it looks like a CSS problem to me. Are you sure that there is nothing placed over the left side of the map?