I have an Ionic Tabs App (I used the Cordova templates on Visual Studio 2015) with a Leaflet map on the second tab. On the first tab I have some search parameters for POIs that I want to show on the map with markers. Everything is working fine, including the map is showing all the tiles, until I start interacting with the controls on the first tab. Specifically, when I enter an input control and the soft keyboard appears, if I then go to the second tab, the map is only showing the first tile. If I zoom in or out, the map refreshes but shows only the first tile. The problem is solved though if I change orientation of the device.
The soft keyboard is not the only thing that causes the problem. On Ripple for example, the soft keyboard does not show (I use the laptop keyboard) but after a while manipulating the search parameters on the first tab, the map stops working properly.
Also, I have tried with the Mapbox API instead of Leaflet and the problem occurs exactly the same way.
The L.Map instance is unable to correctly get/calculate it's dimensions because at initialization the instance's parent container has a style of display: none. You can call invalidateSize on your map instance to make it recalculate it's dimensions when the tab containing your map is shown:
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
http://leafletjs.com/reference.html#map-invalidatesize
I'm by far no ionic expert but according to the docs/reference, ion-tab has a on-select callback where you could do this:
Called when this tab is selected.
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab on-select="onTabSelected()"></ion-tab>
function onTabSelected () {
//Assuming 'map' holds a reference to your map instance.
map.invalidateSize();
}
As mentioned in the comments below by the question poster, the above works, but so does listening for the $ionicView.enter event and using invalidateSize in it's callback:
$scope.$on('$ionicView.enter', function () {
map.invalidateSize();
});
I have create my map with Leaflet exactly how I want it (with my markers and externals links).
I would like to have the popup always fixes in the top right hand corner (for an example). Is there any way to fix the popup's location ?
This is how it should be: jsfiddle.net/expedio/z1nw3pt4/
but i want to use other markers not the red dots..
Thank you in advance!
(It works but its not showing in a div box in the map, its showing below the map in text..)
Got the answer!
just had to change my CSS from : display:none; to display:block !important;
This is my app:
http://jsbin.com/axeWOwAN/1/edit
http://jsbin.com/axeWOwAN/1 (full screen)
As you can see, in the second page there is a map, that is not working properly.
The map alone is tested and works fine.
But when i insterted it into my layout (the one i need) it does not works properly anymore.
Somehow there is some collisions that i am unable to find.
Making some tests i discovered that putting the map in the first position of the menu, it works exactly as i need:
http://jsbin.com/axeWOwAN/3
http://jsbin.com/axeWOwAN/3/edit
But yet i need it in the second page not in the first.
Can you help me to resolve this issue?
Thank you very much!
The problem is that the map is being initialized while the canvas is hidden, to over come this,
you should Reinitialize the map when the canvas becomes visible, or resize the map,
try adding this to your menu.on('click', 'a', function(e) {}); function, after your DIV fadeIn() is completed,
google.maps.event.trigger(map, "resize");
Basically, I have to load two google maps, one dependent on the another. In my main div, I am locating certain points on world map and showing InfoWindow. Now On click of each of the InfoWindow, I need to load the same zoomed out place in another div. I have a bottom div, which will load this place with the latitude and longitude as center of this place and basically a zoomed out version of the place from main Div.
I have set up a fiddle and I am actually not able to pass the center of the Main Div to bottom Div, google map.
Her is how I am doing this:
http://jsfiddle.net/refhat/SN8s4/2/
Help is appreciated.
you did not pass position to loadingAnotherMap. I have updated jsfiddle here:
http://jsfiddle.net/SN8s4/3/
I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?
Thanks!
If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.
It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.
Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.
Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
The map is already wrapped inside a div. Give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable.
If your menu is wrapped in a div container e.g. #menuWrap then assign it position relative and give it a high z-index.... e.g.
#menuWrap {
position: relative;
z-index: 9999999
}
Make sure your map is inside a div
Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.
Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value.
IE gives the problem
every div that is wrapped in a relative positioned div will start a new z-index in IE. The way IE interprets the outer relative divs, is in order of html. Last defined is on top. No matter what the z-indexes of the divs inside the relative positioned divs are.
Solution for IE: define the div that should be on top at last in html.
(So z-index does work in IE, but only per holder div, every holder div is independent of other holder divs)
z-index (especially in Internet Explorer 7) really didn't work for me. I tried many different combination's of high vs. low map z-indices but had no joy.
By far the simplest/quickest answer for me was to re-arrange my mark-up/css to have my flyouts/rollovers listed in the mark-up above/before my map (literally, before the <div id="map">), this way I could let the z-index remain default (auto) and move on to more important aspects of my webapp ;)
Hope this helps!
<ul id="rollover">
<li>There</li>
</ul>
<div id="map">...</div>
I created a google style drop-down and had the same issue...using the V3 api for google maps, you just create a control and place it on the map using:
map.controls[google.map.ControlPosition.TOP].push(control);
Since it is a drop-down, just make sure the z-index of the containing div is highest (z=3) then the drop-down part containing the menu items is lower that the containing div (z=0).
Here's an example.
From my experience, the only time you need to use shims is for plug-ins (like with Google Earth).
No need to set the z-index for both the map and the menu. If you simply set the z-index of the menu higher than the map, it won't necessarily work.
Set the z-index of the map div to -1. Now the menu will drop down and display over the map.........but if you're using a wrapper then the map will no longer be interactive as it is now behind the wrapper.
To work around this, use onmouseover and onmouseout functions in your wrapper div. Make sure those are in your wrapper div and not your map div.
onmouseover="getElementById('map').style.zIndex = '10000';"
onmouseout="getElementById('map').style.zIndex = '-1';"
I've found that sometimes inadvertently neglecting to declare the !doctype will cause this kind of hiccup in IE, when other browsers seem to be able to negotiate the page fine.