I have built a simple map application with a single marker over my office. The marker drops in after the map is built. I would like to trigger a mouseover event after the marker is displayed but it never seems to work. To be clear, I want the default behavior of mouseover, which is to display a simple window with the marker title, to occur from code, not from mousing over the marker. This seems to be the opposite of most of the queries here.
I've tried this:
setTimeout("google.maps.event.trigger( marker, 'mouseover');alert(marker.title);",5000);
In this case the alert happens but the mouseover doesn't seem to. Without the alert there are no messages or errors, the trigger just gets swallowed.
Are there parameters for the mouseover event that I am missing? It doesn't seem so from the documentation, but I can imagine a whole bunch of missing info, primarily where the window should display and for how long.
I imagine that my approach is completely wrong, but according to my reading of the documentation it should work. An alternative of course is to create an InfoWindow like this:
iw = new google.maps.InfoWindow({position: LL, content: marker.title});
iw.open(map, marker);
which works, but the window is fairly ugly compared to what pops up during the mouseover.
Maybe another way of wording my question is HOW CAN I DISPLAY AN INFORMATION WINDOW THAT LOOKS JUST LIKE THE MOUSEOVER WINDOW?
thanks
You'll need to make your own overlay or there are a few which can get you close.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
Related
I'm making a line chart in oCanvas, and I need to show the data of a point of the line, when the user hovers that point with his mouse! Is there like a built-in function for it do it itself, or do I have to make it myself? (I didn't find any useful info on the docs section of the website, and that's why I came here, just in case someone has done it before me and knows how to do it!). I have the data I need to display when the user hovers the point, I just can't get find a hover function. After that I need to show something like a tooltip, that's gonna contain the data. Thank you very much for your help, it is really useful to me! Here's the website: http://ocanvas.org/
oCanvas is a general purpose library, so there is no built-in feature for that. To make hover work, you need to listen to events (mouseenter and mouseleave): http://ocanvas.org/docs/Events/Mouse
When you detect mouseenter you will need to show the tooltip object in the correct position. When you later detect mouseleave you will need to hide the tooltip.
I am working on a project that makes use of a map engine from some private company that I can't mention here.
The system used to be in JQuery, and we recently made some considerable modifications, and the system is now implemented in AngularJS.
On the left side of the screen, we have a slidebar displaying items.
On the right side of the screen, we have the map.
My issue is that when I load the page, the map does not display properly, and the inside overlay is quite small. I have checked their sizes but they are correct.
However, when I resize the window manually, or open the Element Inspector from G. Chrome, the map then gets displayed completely.
I have attempted to redraw the clusterLayer, resize the map, resize the div of the map, but nothing seems to be working.
I found this post Google map does not display properly, it could have solved my problem, but I don't have any power on how the map gets loaded.
Thanks
I had a similar problem with ol3 in conjunction with angular. My workaround was to add:
$(document).ready(function () {map.updateSize()});
With map being my ol3 map object. In this case I did not use the openlayers directive from angular. Which, by the way, when used did not have the displaying problems.
Maybe that helps.
I've had somewhat a similar problem and none of the solutions provided worked for me. So I used timeOut function like this and it worked:
setTimeout(function() {
$scope.$apply(function(){
map.updateSize();
})
});
What's the best way to change a div element to active when you click on a marker?
How to do this when you have dozens or hundreds of markers?
For example, when you click on a marker on a Leaflet map, how to make it so the sidebar element that's related to it will be active?
I can write the sudo code but I'm missing pieces.
markers on click
$(#sidebar div)
make (related) li element active
Basically, I'm trying to mimic what a lot of map directory sites like Yelp or Foursquare do. You click on the sidebar list item and the marker becomes active, and vice versa. This makes it so a user and can read info about the marker while seeing where the place is.
Mapbox had a cool (now deprecated) Foursquare example. I went through the code for that but barely understood it. That said, the example gets the point across.
When you mouseover a listitem in yelp, the marker goes black.
It really depends on how you have architected everything, but assuming you have the map pushpin's hold a ref to the sidebar in some way or another, just add a quick click handler. I've never done anything with leaflet before, but it looks like they support all of the events you need for the markers: http://leafletjs.com/reference.html#marker.
So when you construct each marker, simply store off its corresponding menu item, and bind the event as show below!
marker.on('mouseover', function () {
//Write code to adjust the icon
marker.icon = someNewIcon;
//Store a ref. to the menu item, and use that ref here to manage the view state
currentActive.removeClass('active');
$(this.target).addClass('active');
});
Hopefully this is helpful!
You should try use the sidebar plugin, its very simple to use. I've tested it with 4000 makers and it works very well.
You can find it here:
https://github.com/turbo87/leaflet-sidebar/
I know this is not nearly as straightforward as it is with the Maps API v3, but what would be the best way to effectively limit the zoom or viewable area (if the latter is even possible) with the Earth API? We are trying to prevent people from inadvertently zooming out too far when navigating the small focus area of our map.
Untested, but my first attempt would probably be to listen for the viewchanged event, and check the current view to see if it matches your criteria. If not, you could then flyTo something within your view, and hopefully the effect would be somewhat smooth (but I'm not too sure it would be totally smooth).
See http://code.google.com/apis/ajax/playground/#viewchange_event_(and_viewchangebegin,_viewchangeend) for an example of checking for the viewchanged event.
I'm currently using an application that generates large images for organizational maps, unfortunately the content is quite small due to the volume of data being output. I would like to find a way that allows the user to view segments of the map in an intuitive manner, yet still allow the user to click content inside of the map.
The first thing that came to mind was an image magnifier using something similar to the loupe jQuery plugin. This works great for magnifying the image, but I can't select content once magnified. If anyone has any suggestions for possible solutions to this issue I would greatly appreciate the help.
Thanks!
You might try Etalage: http://frique.me/demos/etalage/ -- if you click on the image, the link works (triggers the javascript alert), almost no other image zoomer seems to do that.
I'm trying to find something that returns the coordinates on a click, so I can ask users to zoom and and find things within a picture, and then I'll have the coordinates to crop the picture to extract the items they've found. But I haven't found a script that does that yet, either.