On of the drawbacks of google maps infowindows is that map will move to make room for the infowindow to display. ebubble( http://econym.org.uk/gmap/ebubble.html) overcomes this limitation, it doesn't move the map. However. it has its own limitations (you can't leave it on, like the infowindow, due to the way it works (it immediately hides). Also, the bubble, being absolutely positioned, might get cropped)
Are there more alternatives to the infowindow that doesn't move the map, besides ebubble?
Depending on your needs (which aren't totally clear from your description), you might consider MapTooltip, which lets you put arbitrary HTML into a tooltip. I haven't used it, but it's mentioned in this excellent presentation on Google Maps.
Alternatively, you might be able to make the InfoWindow do what you want with some event handling code. movestart and the InfoWindow's onOpenFn might let you do this - try catching movestart and remembering the map's position, then in your onOpenFn restore the position. This might look ugly, though.
Did you see the EWindow?
If you are willing to use the Google Maps Flash API, there is a way of opening info windows without the map panning. The info window stays open until the user closes it. The user can move the map while the window remains open.
Link to example here.
Right click map to view source.
Have you tried using InfoBubble? I like this implementation better than the default InfoWindow.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
Related
The question posted below
how to rotate a google map in a web application
can be use to rotate the map by rotating the div which contains the map
but if i do scroll or drag on the map the map is working in unpredictably way is there a way to retain those functionalities as it is
Note: i am rotating the map using div because the aerial tiles are not available at that location.
Please say whether this can be done with some other map api are how to go about it in google map API
It is difficult to answer with certainty unless you post a more complete answer, but I believe your issue is with the corrodinate system.
You are rotating the display of the map, but the x,y coordinates of your mouse are not. When you drag the mouse, the javascript is capturing the mouse movement relative to the screen and then you are rotating the output by 45 degrees. In other words, google maps has no idea that you have rotated it. It would be the same output if you just turned your monitor 90degrees, the mouse is still going to send the same x,y coordinates.
In order to do what I think you want you would need to take over the code handling the movement or accomplish it another way. You will notice that the dragging is disabled on the example you referenced.
This might be a place to start looking for getting the center of the map on mouse events:
https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
You might be able to get the current coordinates and "transform" the new coordiantes by looking at this example of getting pixels:
https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
Here is a page explaining some things about transforming coordinate systems:
http://www.continuummechanics.org/cm/coordxforms.html
If this is something that you really have to do, it can probably be done, but it is likely a lot more trouble to get right than it is worth for an average map embed. It might also add a lot of processing that will make the interaction pretty laggy.
After saying all that, I'd still love to see an example of this working so if you do make it work please post some code.
I am using the platform Ushahidi Web-2.7.3 , see: http://ti5.net.br/provedorlegal.com.br, and when I zoom in beyond a certain level, the clustered markers disappear from the map. I also tested this on an older version of a site, see: http://movimentofichalimpa.org/mapa, where the clustered markers do not disappear on zooming in, but just become ungrouped, as is normal with a cluster strategy. How can I make the markers remain on the map when zooming in?
Ushahidi actually uses OpenLayers under the hood -- the images may come from Google, but the Javascript library is pure OpenLayers. These markers are actually generated by adding what is known as a context to the style attribute of the OpenLayers.Layer.Vector and an associated Cluster.Strategy. There is a good example of it working properly here: OpenLayers cluster example and if you look at the Javascript source you will see how it is done: view-source:http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/strategy-cluster-threshold.html by defining a radius in the context of the styleMap.
The reason that your example isn't working is that there is actually a script error being triggered, which is stopping the clustering/styling from being performed. The styles are defined in the file ushahidi.js. If you open a Javascript debugger you will see the error for yourself that is firing before the ushahidi.js functions are called to determine the number of features in the cluster and therefore the radius of the markers.
The actual error is http://ti5.net.br/provedorlegal.com.br/index.php/json/cluster?s=1401591600&e=1404183599&z=9, but I have no idea why, as the OpenLayers is the minified version which is very hard to debug. You might find moving your application to OpenLayers directly will help, as it will be easier to debug, and it also works on mobiles, which I know is one of the reasons people like to use Ushahidi.
I'm trying to add videoView inside a infoWindow,is it possible?Can anyone give me an example. Thank you
From GoogleMap Api Docs... An info window is not a live View, rather the view is rendered as an image onto the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view. You are advised not to place interactive components — such as buttons, checkboxes, or text inputs — within your custom info window. Sadly,it seems like it means no video on infowindow marker
hopefully someone prove me wrong
I'm displaying InfoWindow popups (using InfoBubble, a stylable subclass implemented by some open source badasses) when map elements are hovered. If the thing on the map is at the edge, then the InfoBubble will be truncated.
Of course, there is the autoPan option, but that makes the performance bad because of the constant panning. Instead, I would like to either:
have the contents of the InfoWindow / InfoBubble be visible even though it extends beyond the map edge, or
intelligently switch the position and dimensions of the InfoWindow depending on where the edge is.
Option 2 is not what I want to be coding right now.
Anybody know of a way to achieve Option 1?
(Google Maps API v3)
I would try to set high z-index(say 1000) on the div that wraps the info bubble.
I think I solved this by ... not using the info bubble. I made a custom info bubble that just displayed a regular DOM node (a div) at the position that I wanted. It was therefore not subject to the limit of being inside of the map pane.
You can see the result on https://givelocal.drivetoendhunger.org/stats (the pop up that is displayed when you hover over the map is not an 'info bubble').
I am working on a HTML5 application designed to run a Google map which takes up the entire screen on a mobile phone. For the sake of simple debugging, and perhaps later for legitimate informational purposes, I would like to position some text in the bottom right hand corner of the map, which reports some information, such as the current lat/lng of the user. I have looked through the v3 API, and to the best of my knowledge there's nothing in there to do this. Is there any kind of workaround that would permit this to be done?
Pretty easy really. Add a div as a control. Define an empty div anywhere in your html. Add it as a control, and Maps sucks it into the map display. Then write to it with any DOM functions you wish.
<div id="debug"></div>
-- code goes here --
var x = document.getElementById("debug");
mapName.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(x);
-- code goes here --
$("#debug").html("debugging info")
Hope that is enough to get the idea across.
In my example I put it in RIGHT_BOTTOM. Other options are here.
Skip
It might be too much work to implement an overlay. For debugging purposes, you're better off using the console logging options from FireBug (or a similar tool). As for the legitimate information, if it's geo-specific, you could use the InfoWindow.
If the data isn't geo-specific, it's probably best displayed outside of the map (You could resize it to be < 100%). Hope that helps.