I'm having an issue right now with my map where I need to export it as an image with the overlay layers. I found a solution to do so using html2canvas, however there is a bug with it where if you pan the map at all, when taking the screenshot the layers will not display properly in the screenshot from html2canvas like so...
Yet if I just change the center of my map with map.setView() it works fine. So my thought is, if I could just trigger the map to reload completely (including the layers) it would maybe overlay correctly. How can I trigger a Leaflet map to reload everything including the overlay layers?
I've looked through the documentation but haven't as of this second found a clear solution.
We had the same problem today. It also happened with an export by dom-to-image-more/lealfet-easy-print plugin.
Try to disable zoomSnap or try to deactivate the fractional zoom functionality.
Setting the view to some random place in the ocean and then changing it back worked.
function redraw() {
var lat_tmp = map.getCenter().lat;
var lng_tmp = map.getCenter().lng;
map.setView([-66.22149259832975, -1.142578125]);
console.log("Reloading...");
setTimeout(function () {
waitForTilesToLoad()
}, 50000);
map.setView([lat_tmp, lng_tmp]);
console.log("Done");
}
I have an issue with my map since i put it from the sidebar to the main content of my page.
The map is displaced to the upper right corner and the rest of the canvas keeps blank.
Goto this link:
http://bit.ly/1u8gFBb (click on Map within the tabs below the image)
Can someone suggest what this causes this rendering problem and how to solve?
Refer this questions!
Question 1
Question 2
Question 3
SOLUTION:
I found the solution in above questions.
I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
or
Resize the map
google.maps.event.trigger(map, 'resize');
Recenter the map, where myCenter is your lat, lng point.
map.setCenter(myCenter);
The "tab" which I added before was a li within the tabs the content get into troubles.
1) There are certain things missing in your API.
2) Check your logs..
i have 3 different google maps on my site, one for when viewing on desktop, tablet and mobile, when i resize my browser which people might do the new map pointer that has now resized isn't in the right place until i refresh the page, i want to just reload the iframe, im very new to javascript and tried this but its nots working
<script type="text/javascript">
if( $(window).width() == 985){
document.getElementById('map-desk').contentWindow.location.reload(true);
}
if( $(window).width() == 975){
document.getElementById('map-tab').contentWindow.location.reload(true);
}
if( $(window).width() == 765){
document.getElementById('map-mob').contentWindow.location.reload(true);
}
</script>
so like when the screen equals a certain width the iframe with that id reloads or refreshes
There's no actual event handler so it'll only fire once, when the browser loads (which is obviously not what you want). As you're using jQuery, wrap your code in:
$(window).resize(function() {
// code goes here...
});
... which will run the code inside every single time there's even a minute change to the browser size. Though you're going to come across the issue that $(window).width() is very rarely going to hit that exact pixel value. I'm not certain of the best solution, but something involving checking the condition +/- 30 pixels either way or so might work.
I think you are looking for the following event in jQuery
window.onresize = function(event) {
//your code to resize and reload here
}
Google maps reloads itself if the mapdiv is resized. Give 100% width to mapdiv. It will fit the size of the window. If you want to change the contents of maps (layers, markers, routes...), you should use google map events. Events, options and methods are listed here:https://developers.google.com/maps/documentation/javascript/reference
I'm using Google Mpas Api v3 to display a map in a 200px high div:
<div id='propertyKaart'></div>
With the normal javascript i'm using this div to display the map:
$(document).ready(function(){
var map = new google.maps.Map(document.getElementById("propertyKaart"),
mapOptions);
map.setCenter(punt);
map.setZoom(14);
})
With a click on a button with class .mapPuller I want to change the height of the chart to lets say 600px:
var mapState
$('.mapPuller').click(function(e){
if(mapState == 'klein'){
$('#propertyKaart').animate({height: '600px'}, 200);
mapState = 'groot'
}else{
$('#propertyKaart').animate({height: '200px'}, 200);
mapState = 'klein';
}
//---- here
})
Works like a charm, with only one problem. The map (the tiles, so to say) still think the div is 200px high.
In the documentation I found I had to trigger the resize event when changing the container div. So I added the following code in the .mapPuller function on the //------ here spot.
google.maps.event.trigger(map, 'resize');
But this doesn't work......
Am I missing something?
When I resize my browser window, the event gets triggered and the tiles seem to do their work.....
I tried resizing the map with jquery's animate function and had the same problem with you. The map tiles didn't adapt. But triggering the map resize event fixed the problem.
So, maybe there's a problem with scoping. Make sure that the map variable is accessible inside mapPuller function and make sure that there isn't other errors in the console.
I have a google maps on my page with a search pane I built myself which can be displayed and hidden at will. It covers like lets say 200 pixels of the map on a side. The thing is that when I resize my map or so the area where the pane overlaps is unrendered i.e the map doesn't render there for some reason.
Check out this link
In the Box type in lets say OMDB which is an icao code for an airport and press enter.
The results are shown and you see the pane. Now click on the full screen link and then click on the airports tab to make the panel go away - you see now that part of the map hasn't rendered at all...I have to drag the map around and that only partially renders that area. How can I fix it?
FYI I've run it on Google Chrome, Firefox and IE8 on Windows XP. Is there a way to like force complete rendering of a map or so? This is quite an erratic problem and could it be concerne with my code or is it a host issue? Or does Google just don't like me? :(
EDIT: See the big ugly patch on the side. Its unrendered area where the map should have been rendered as well. No amount of zooming in and panning is helping clear this :(
I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.
It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.
Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.
By using something like this:
<div id="map_canvas" style="width:500px;height:500px;"></div>
instead of
<div id="map_canvas"></div>
you'll be home free !
As far as I can see it works fine on OS X 10.6.2 in Google Chrome.
http://i33.tinypic.com/sfe3ah.png
Only problem is that Copenhagen Airport is nowhere near the location your application implies. And LAX is in the middle of the ocean ;-)
Edit:
I see your screenshot, and it would appear to me that somehow Google Maps does not render the part of the map that was covered by the search and search results pane, and afterwards the rendering is not triggered correctly upon hiding the search pane.
I haven't been able to find a decent render triggerer in the Google Maps API, but I think you should try something like programatically zooming in and out or moving the center of the map somewhere else and back, in order to maybe force the re-rendering of the map.
Alternatively you could try manually triggering some of the events that you think might set off a rerendering of the map, for example google.maps.event.trigger(map, 'resize').
I know these suggestions feel like a terrible hacking way of making it work, and I am highly unsure whether it would work, but it is my best shot ;-)
In Google Maps V3, the little bit of magic you need is documented here:
https://developers.google.com/maps/documentation/javascript/reference#Map
under events
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize')
The trick is knowing when to call this which will be situational depending on your code. If you're using Bootstrap 3 Modals, this works beautifully.
$("#modal-map")
.modal()
.on("shown.bs.modal", function() {
google.maps.event.trigger(gmap, 'resize');
});
Where gmap is the google.maps.Map object you created.
I faced same issue when i tried to load google map in dialog. It was like google map was not rendered properly. so i find out below solution which may be solve your problem.
I have triggered google map resize event after initialize dialog please check below snipped code.
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
Example:
I have loaded map by ajax call then initialized dialog and at last triggered google map resize event.
$.ajax({
url:"map.php",
type:"POST",
success:function(data){
$("#inlineEditForm").html(data);
$('#inlineEditPopUp').dialog('open');
google.maps.event.trigger(map, 'resize', function () {
// your callback content
});
}
});
If you are using the jQuery plugin goMap, then you should use:
google.maps.event.trigger($.goMap.map, 'resize');
Although you should wrap this in an event so that it runs when the map is shown.
This how i do it in my code :
$(document).on('click', '#mapClicker', 'initmap', function() {
setTimeout(function() {
google.maps.event.trigger($.goMap.map, 'resize');
$.goMap.fitBounds();
}, 100)
});
I know this question is a bit old, but I just came across a similar problem. However, in my case, I was setting the map to be loaded from the body (for a full screen effect) within an iframe.
Like Jay mentioned on his answer a width and height must be specified which I had not done then.
I changed:
<body style="margin:0;">
to:
<body style="margin:0;width:100%;height:100%">
and now it loads perfectly on Chrome, Firefox and Internet Explorer 10.
Hopefully this helps anyone out there who also came across this problem. You must specify width and height for it to work across different clients.
Regards
I had the same problem and solved it simply by changing the width of the containing div to "px" instead of "%" (e.g width="700px" instead of "80%"). I guess that google can do better size calculation that way... I don't guarantee for this but it helped me
I had this issue and I found the only solution (in my instance) was to trigger the resize inline after the element. I can't say why but I found a thread where somebody also had this solution. (sorry no ref.) My setup was a tad different; it was from a jQueryMobile injected page so the late instantiation may have something to do with my issue. Hopefully this helps someone.
<div id="my-map"></div>
<script type="text/javascript">
$('#my-map').height($("#my-map-container").height());
$('#my-map').width($("#my-map-container").width());
google.maps.event.trigger($('#my-map'), 'resize');
</script>
In my case, same issues for Mac devices on:
Safari 5.1.7 (Os Windows 10[Sorry])
Safari 5.1 (Ipad 1 [Old Sorry])
Safari 10 (Iphone 6 Plus)
Here my solution work for me:
1) capture Browser width detect.min.js
2) change attr style width parameter
3) resize map
/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
canvasWidth = $(window).width(),
$(".macarte").attr("style","width:"+canvasWidth+"px")
google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */
I faced the same issue when setting the map centre manually. I solved it by the below code:
google.maps.event.trigger(map, "center_changed");
function initialize(lon,lat) {
var largeLatlng = new google.maps.LatLng(lon,lat);
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
google.maps.event.addListenerOnce(largeMap, 'idle', function(){
google.maps.event.trigger(largeMap, 'resize');
largeMap.setCenter(largeLatlng);
});
largeMarker.setMap(largeMap);
}