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'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'm working on a Google Maps app, and using the infobox plugin from Google I've run into a bit of trouble.
It seems that the close button no longer wants to work on the infoboxes, which is strange because I did have it working before, as I am turning a kiosk app into a web app. I am using a custom close button for this, but even if I switch it to google's default close button I get the same result. The infobox only closes when you click another marker on the map to open another infobox. Once one is open, it seems to be impossible to remove it. The code has not changed from the kiosk to the web version of this app...
Here is some code I'm using to instantiate the markers:
var displayingInfoBox;
// Options for the infobox
var popoverOptions = {
disableAutoPan : false,
maxWidth : 0,
closeBoxMargin : '8px 32px',
closeBoxURL : 'url/to/close_button/image.png',
infoBoxClearance : new google.maps.Size(50,50),
isHidden : false,
enableEventPropagation : true,
boxStyle: {
border : 'none',
opacity : 1.0,
background : "transparent url( 'url/to/background/image.png' ) no-repeat 0 0",
width: "266px",
height: "109px"
}
};
// Add listener to the marker to open the overlay -- where popupInfo is the content to display inside the popover and marker is the marker on the map
google.maps.event.addListener(marker, 'click', function( event ) {
createOverlay( marker, popupInfo, new google.maps.Size(-35, -235))
});
// Method to show in the overlay
function createOverlay(marker_, content_, offset_) {
// close the previous overlay if there was one.
VW.Map.closeInfoBox();
// set the provided content to the popover options
popoverOptions.content = content_;
popoverOptions.pixelOffset = offset_;
// use the infobox lib to create an overlay
displayingInfoBox = new InfoBox(popoverOptions);
// show the overlay over the marker passed in
displayingInfoBox.open(myMap, marker_);
// return in case the caller wants to do something with this.
return displayingInfoBox;
}
Any help with this is much appreciated.
Thanks in advance!
EDIT -- I am using the INFOBOX API, and not the InfoWindow object from the maps API. This is what I'm talking about: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Graham
I had this problem. I used my main CSS stylesheet to style my infobox rather than boxStyle in the Javascript. When I had the opacity setting on anything other than 1.0 (or removed altogether) the close button would be visible but would not work. My advice would be to check to make sure your infobox does not inherit opacity from anywhere else.
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);
}