I need to display marker over opened infowindow.
Here is an example of what I'd like to do
If I understand correctly, the property zindex for marker and infowindow not act for each other.
You are correct, the z-index property works only along with the same type of objects (relative z-index). Marker z-indexes compared with other Markers, Polygons with other Polygons, and InfoWindows with other InfoWindows. Each of these types have their own layer z-index related to each other that cannot be overridden. Maps API #InfoWindowOptions and Maps API #PolylineOptions; check z-index description. It's written throughout the API documentation.
I don't remember the exact order of the main layers, but it can be tested easily. For sure though InfoWindows appear above Markers.
:) 1> marker you can use image to set image of default marker google.
2 : InfoWindowOptions can display HTML inner.
I'm trying to display property boundaries on top of a Google Map by using KineticJS and a Google Maps OverviewLayer.
It works great (1000 parcels being shown at a time. Much faster than Google.Maps.Polygon())
When I drag the Google Map down, then zoom in/out, the top shapes get cut off and don't re-draw when I zoom back out.
I'm guessing its a setX, setY thing but I don't understand the underlying concepts enough.
Any help would be appreciated.
Here is my app:
KineticJS and Google Maps OverlayView test site
I added a light-green background to the KineticJS canvas to see what it happening when you zoom in.
The canvas seems to stay locked in place and the same width/height but when you zoom in I'm guessing the canvas should grow proportionally.
I can't figure out how to do that though....
Any help would be appreciated!
I started implementing my software using maps api v3. Unfortunatelly i found out that v3 API has some serious issues which draws me back from bying a bussiness licence.
My clients use monitors with HD resolution which is 1920x1080 and the map takes 90% of the screen space. Unfortunatelly here comes the problem i am talking about. When i click with the mouse on the map and start dragging it it is not smootly and it is really annoying. All the fun goes away.
I tried some different scenarious using windows XP, windows 7 and Windows 8. The browsers i am working with are the latest versions of Firefox, Chrome and IE.
Here are the results when i try to drag the map:
Small screen resolution 320x240: Firefox, Chrome and IE handle it very well. It is impossible to notice that the dragging is not smooth.
Small screen resolution 320x240 with 10 polylines on the map: Chrome and IE handle it kind of well but if you have experience with v2 API you will notice a difference. Firefox - nightmare, dragging is not smooth at all.
Medium screen resolution 1024x768. Firefox - there is some incosistent lagging. Chrome and IE - kind of smooth dragging but if you move the mouse fast things get worse.
Medium screen resolution 1024x768 with 10 polylines on the map. Firefox - nightmare. Chrome and IE - you start to notice that there is some delay but at the same time it looks kind of smooth.
High screen resolution 1920x1080. Firefox - huge lagging. Chrome and IE - a little better but still there is a noticeble lagging.
6) High screen resolution 1920x1080 with polylines on the map: Firefox, Chrome ad IE - NIGHTMARE. It is almost impossible to drag the map.
Interesting facts:
The problem described above does not exists with v2 API of google maps.
The problem described above does not exists when the mouse is moved less than 50-60 pixels per second. Dragging is really smooth. When the mouse is beeing moved fast the lagging appears.
On http://maps.google.com the problem does not exists at all BUT when i open some of the code samples on developers guide the problem is there. Here is an example: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.
I think that i described the problem as deep as possible and no matter how hard i tried to bypass it i could not find any solution.
I will be glad if somebody shares their opinion on this problem.
P.S. Unfortunatelly i do not have a key for v2 so i can not create an example where you can view the map outside my localhost but i found a web site where there is a side by side comparison (v2 and v3). Try dragging the maps to see the VERY difference.
http://www.wolfpil.de/v2-v3-sidebyside.html
The resolution of the maps is very small and most probably unexperienced users may not see the difference so i will give you also the seperate links to the maps and you just have to use firebug or a similar debuger to make the canvas resolution bigger. Then you will see what i am talking about.
map v2: http://www.wolfpil.de/v2.html
map v3: http://www.wolfpil.de/v3.html
We had issue that we had CSS3 transition added to all elements..
So remove transition and its worked fine..
See example:
#map * {
-moz-transition: none;
-webkit-transition: none;
-o-transition: all 0s ease;
transition: none;
}
Same here. What I noticed is that v3 fires a lot of events while panning the map and the browser tends to choke (FF especially). I say this because I also used Bing Maps API and the number of events per second for viewchange (equivalent for center_changed in Google) is much smaller. Also they provide the method addThrottledHandler() with which you can reduce the number of events generated.
From what I can tell, Google Maps seem to fire one center_changed event for each mousemove event and before the map's view is updated. So you get a lot of events generated but none of them are replicated on the screen; browser chokes on map view updates or it might be that the map waits until there are no more changes and only then it updates the view.
Edit: if we prevent some of the mousemove events to reach Google Maps then the browser will not choke on mousemove events plus all the other events that Google Maps generates from this event, like center_changed, and the map will pan smoothly.
To do this we add an event listener to the #map div (we can add it to body tag also). We add the event for the capture phase. When mouse moves on the screen, first the body tag receives the event then our #map div and then Google Maps elements (divs, tiles). This is the capture phase. After that follows the bubble phase in which the event goes back from Google Maps elements to our #map div and then to the body tag. Usually event handlers are registered for the bubbling phase so if we register a handler for the capture phase we can cancel the event and so there will be no bubbling phase for this event. This also means that Google Maps will not receive the event.
You can increase the period and space parameters to kill more events. Killing too many events means that the map will start to jump from one position to the next. Killing too few means that all events will reach Google Maps and the browser will choke on newly generated events from Google Maps and so the map will jump from one position to the next. Some middle ground works best.
Now after all these, Google Maps will not be as smooth as Bing Maps. This is because Bing Maps use inertia: when you move the map violently, the map will start slowly to follow the mouse and then faster and faster. This creates a very smooth pan indeed.
An interesting fact that I've found is that Google Chrome and Opera/Chrommium will generate about one mousemove event per second even if the mouse doesn't move! This code will kill those events too (because distance is zero for those events).
http://jsfiddle.net/uNm57/ (check js console in Firefox; you should see some events that are stopped and then one allowed event)
<html>
<head>
<style type='text/css'>
#map {
position: absolute;
width: 100%;
height: 100%;
margin: 20px;
}
</style>
<script type='text/javascript'>
var last = {time : new Date(), // last time we let an event pass.
x : -100, // last x position af the event that passed.
y : -100}; // last y position af the event that passed.
var period = 100; // ms - don't let pass more than one event every 100ms.
var space = 2; // px - let event pass if distance between the last and
// current position is greater than 2 px.
function init_map() {
map_div = document.getElementById("map")
// map
var map_options = {
center: new google.maps.LatLng(45.836454, 23.372497),
zoom: 8
};
map = new google.maps.Map(document.getElementById("map"), map_options);
// register event handler that will throttle the events.
// "true" means we capture the event and so we get the event
// before Google Maps gets it. So if we cancel the event,
// Google Maps will never receive it.
map_div.addEventListener("mousemove", throttle_events, true);
};
function throttle_events(event) {
var now = new Date();
var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2));
var time = now.getTime() - last.time.getTime();
if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both
console.log("event stopped");
if (event.stopPropagation) { // W3C/addEventListener()
event.stopPropagation();
} else { // Older IE.
event.cancelBubble = true;
};
} else {
console.log("event allowed: " + now.getTime());
last.time = now;
last.x = event.clientX;
last.y = event.clientY;
};
};
</script>
</head>
<body onload = "init_map()">
<div id="map"></div>
</body>
</html>
I was facing this issue in only mobile browsers. The drag/pan was smooth in desktop browsers but when it came to mobile there was lag when user dragged the map. I spent like 3 hours on this and finally realized that a missing meta tag was the reason.
Basically if you do not include this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
the problem comes. I feel incredibly stupid for realizing this after 3 hours or not adding the meta tag in the first place. But anyways if someone else is also making this mistake I hope I saved some of your time.
I faced the same problem and lost my days to solve, finally I figured out how this can be solved simply.
#Arturs Smirnovs's answer was very helpful.
In my case, there was a transition in css, by that google map was not working smoothly, I added the css to disable the transition into the map, so that the map worked very expectedly.
Hope this can help anyone.
.google-map * {
transition: none !important;
}
I'm using the Google Earth Plugin with the sky map data and I've found a part of the sky that seems to have a glitch. The attached jsfiddle shows the placemark I create and nearby celestial objects as it's flying in, but past a certain point, they all disappear. If you zoom out enough, it comes back, but I can't get zoom in enough.
If I change the star coordinates to something else (e.g. {lat: -4.14463888888889, lng: -74.877625}), it works just fine. Try it out:
http://jsfiddle.net/D9Ade/6/
I updated my Google Earth plugin from 7.0.3.8542 to 7.1.1.1580 and it started working!
I'm displaying an image over the entire google map. The image is transparent. I follower the documentation from google and everything worked out fine. The image will change each time i move or zoom on the map. After a while I can't zoom or move the map anymore, I'm zooming and moving only the image. Why does this happen and how can I solve it?
There are multiple issues contributing to problems on the page:
You are destroying and recreating your overlay on center_changed and zoom_changed events. Instead, you should just be updating the image within the overlay. You should really only need to create the overlay once.
Instead of adding your weather image to your OverlayView, you are adding it to a div that covers the map. This is what is blocking your events from effecting the map (the click and drag events are occurring on your weather div not the map).