Instead of the default position above the marker , I want the InfoWindow to be open to the top right corner of the map . How to do that ?
Infowindows may be attached to either a marker object or on the map itself at a sepcified lat,lng. That being said, if you allow users to pan your map, there isn't a good way to put the infowindow at the top-right corner of the map. You can only anchor it to a marker or specific lat,lng. Moving the map will move the infowindow whether it is anchored to a marker or a lat,lng.
One possible thing you could do as a workaround is use custom controls as documented here:
https://developers.google.com/maps/documentation/javascript/controls#CustomControls
You can put these custom controls at the top-right corner of the map. Depending on what you were wanting the infowindow to have inside of it, you may be able to use the custom controls in the link above to accomplish what you need. The custom controls are really intended for user interaction, but if you need to have an info-window at the top-right of your map to display information, I believe this would be a good workaround.
I hope this helps!
Related
I have a map with a semi-transparent search bar on top of it. I have also got a bunch of markers with infowindow attached to them.
The problem is that google maps autopan feature obviously doesn't take my search bar into account, therefore if my marker is too close to the top, a part of the infowindow gets covered by the bar.
Is it possible to somehow specify the minimum distance the infowindow needs to be from the map's top?
I was also thinking of limiting the bounds of the map using markers' positions but in my case the markers can also end up under the search bar, so it is not an option.
Any ideas? Thank you for your time!
There exists a library called Snazzy Info Window that can be used instead of the usual InfoWindow. Then you can pass an option edgeOffset in pixels to this object and voila, problem solved. Hope this helps someone in the future!
I am using Google maps SDK for iOS. My question is two parts:
1) I have multiple markers on my map. But I want them displayed as dot and when tapped a marker needs to be place. Like the default behavior of Google maps iOS
2) How do I bring a sliding drawer on the bottom when tapped on the marker? I understand the I must use didMarkerTapped by delegating 'GMSMapViewDelegate' but are there any libraries for sliding views from the bottom?
You can try the below approach:
1, Initially add all the markers with an icon image same as the small dot you require. Then when a marker is tapped, in didTapMarker you can add a new marker at the tapped position with an icon set to the default marker icon you have shown. Keep the refernce to this marker so that you can remove it when user taps on the map again.
2, For implementing a sliding menu from the bottom, you can try using FTUtils . Please find an earlier post on the same
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
});
Using Google Maps InfoBox -
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Currently the map will scroll - pan control - when your infobox is outside of the bounds of the map.
I'm looking for a way to detect if the infobox will be outside of the bounds of the map, and if so the position is switched (currently I have the infoBoxAnchor set at 9,2) - so set the infoboxanchor in the opposite x direction.
Anyone done anything like this?
Thanks.
Could be tricky - infowindows are dynamically sized based on the content in them. What you could do, is in the InfoWindowOptions, set disableAutoPan=true. This will prevent the map panning to display the infowindow. Then I'm guessing you could use jQuery (or any other JS you like) to figure out:
the size of the infowindow based on the position where it's anchored to on the map,
is the entire infowindow visible
if not, move the infowindow's position
Related:
Auto adjustment of InfoWindow position on Google Maps
Google Maps Mashup with Intelligently positioning InfoBox
Google Maps: How to prevent InfoWindow from shifting the map
And a possible solution (thanks to above links) at http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
In Google Map API v3, as the title, I only saw 2 types of animation in google map api, but I saw in some places the map marker animate like grow big when mouse over it? How to implement this?
Use marker's mouseover event handler and setIcon() method. You can use dynamic icons from google chart api for this purpose, and change the chld attribute to make the icon grow:
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.5|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FF8800|15|_|
http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.7|0|FF8800|15|_|
Don't forget to set proper anchor point! For example:
marker.setIcon(new google.maps.MarkerImage(
'http://chart.googleapis.com/chart?chst=d_map_spin&chld=0.65|0|FF8800|15|_|',
null,
null,
new google.maps.Point(11, 43) // this is the proper anchor point for scale 0.65
));
You could use your own image as a marker, then make use of the scaledSize property for the marker image to make it bigger when the mouseover event fires.
I don't know of a way to do this without doing some more complicated stuff like this.