Google Maps not rendering completely on page?

Google Maps not rendering completely on page? - javascript

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);
}

Related

Leaflet js map out of bound on small screens

What I have
I have a page with leaflet map whose script is available here.
Also in order to handle resizing of map on small screens, I have this just before the HTML <body> tag:
<script>
setInterval(function () {
map.invalidateSize();
}, 100);
</script>
Problem
On big screens, the map is within the bounds. On small screens, the map goes out of bound and shows the whole world.
How to reproduce this error ?
Visit this link on a big screen device - note how the map looks like - it is bounded
Now visit the same link in a small device (resolution <=360px)
Try to see the map by clicking on 'Show map'
If you are able to see that the map is still bounded, just refresh the page and then click on 'show map' again - the map goes unbounded - it shows the whole world

How can I trigger a Leaflet map to reload everything including the overlay layers?

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");
}

Reloading google map

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

changing the height of the div where google maps is drawn in

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.

Grey boxes appear in parts of embedded Google Map in modal box

I'm having a problem with embedding a Google Map via the v3 API in a modal box.
Grey boxes appear in the map canvas when the modal is shown. Resizing the browser window, bringing up Web Inspector, etc. makes all map tiles visible, i.e. it "force re-render" the map.
The parent element of the map element (section#map-modal, see code below) has display: none set in its CSS on page load. The JS modal code automatically sets display: block when the show button is clicked. If I temporarily remove display: none from the modal element, the map renders correctly on page refresh. Isn't the Google Map liking having a hidden parent element?
I'm using Twitter's Bootstrap modal jQuery plugin, and am controlling the modal itself with CSS. It's fixed positioned, have a pixel width, etc. Nothing unusual.
I've of course googled around for solutions, and many points to the Google API method of triggering the resize event:
google.maps.event.trigger(map, 'resize');
I've indeed done so, but to no avail.
Relevant code: https://gist.github.com/1591488
As you can see, I'me triggering the events at line 39.
(press the View larger map button at the bottom of the sidebar).
Files:
fagerhult.js
fagerhult.map.js
bootstrap-modal.js
master.css
I would deeply appreciate any help or extra pair of eyes in this, as I'm soon going mad over it.

Try using the modal event handlers. I think this is the most concise (and correct) way to ensure that you are resizing after the modal is shown without rewriting any plugins:
$('#map-modal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
})
UPDATE: I just realized that this solution still does not center the map properly, so I needed to add one more command:
$('#map-modal').on('shown', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})

I discovered that having display: none on the map's parent element (the modal) really messed things up. I changed it to visibility: hidden just in sheer desperation to see what would happen, and it worked!
I also modified the modal JS code to set the modal to visibility: visible/hidden when the modal is shown/hid. Otherwise it would get display: none/block set again, which would create the grey boxes again.

My solution for bootstrap-modal.js v 2.0
replace class "hide" for "invisible" in Modal div
<div id="map_modal" class="modal fade invisible">
...
</div>
function javascript
function open_map()
{
$('#map_modal').removeClass("invisible");
$('#map_modal').modal('toggle');
}
link html
Open map

For those using bootstrap, I had to remove "fade" from my "modal" class
From
<div class="modal fade"
to
<div class="modal" ...
I had tried the previous solutions with calling google.maps.event.trigger(map, 'resize'); but figured that
.on("shown.bs.modal" ...
was never getting called. This issue seemed to point me to removing the fade.
https://github.com/twbs/bootstrap/issues/11793
This is not an optimal solution since the fade is actually very nice to have...

The problem is that if you do something like this:
$("#mapModalLink").click(function(){
google.maps.event.trigger(map,"resize");
});
is that your modal probably wasn't open (and displayed at the right size) when the resize event is triggered. To solve this:
$("#mapModalLink").click(function(){
$("#mapModal").show();
google.maps.event.trigger(map, 'resize');
});
Worked for me at least :)

I had this problem and I solved it doing a callback to the draw method. I think this happens because you draw your map erlier than showing the dialog.
I used this code to solve it (it wasn´t a modal window):
$('#map').show(function()
{
var punto = new google.maps.LatLng(this.latitud, this.longitud);
var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false};
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var marker = new google.maps.Marker({
position:punto,
map: map,
title: this.nombre
});
});

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.trigger(map, 'resize');
});
});

As far as I poked at it a bit on Chrome using JS live edit, delaying the execution of resize to wait for the modal animation might work :)
https://gist.github.com/1592330#L107

map rendered successfully without resize.
Why resize gives you proper map ?
Because browser paints the view again.
How to fix it?
To get a proper layout of the map in any panel which is triggered lately, map has to be painted after the panel is loaded.This can be achieved by (setTimeout) code as mentioned below.
code objective is to trigger map resize event after 60 milli seconds.
setTimeout(function () {
uiGmapIsReady.promise().then(function (maps) {
google.maps.event.trigger(maps[0].map, 'resize');
lat = -37;
lon = 144;
maps[0].map.panTo(new google.maps.LatLng(lat,lon));
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
$scope.map.markers = [];
$scope.map.markers.push(marker);
console.log($scope.map.markers);
});
}, 60);

Develop Reference

JavaScript is the programming language of the Web.

Google Maps not rendering completely on page? - javascript

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 !

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 faced the same issue when setting the map centre manually. I solved it by the below code: google.maps.event.trigger(map, "center_changed");

Related

Leaflet js map out of bound on small screens

How can I trigger a Leaflet map to reload everything including the overlay layers?

Reloading google map

changing the height of the div where google maps is drawn in

Grey boxes appear in parts of embedded Google Map in modal box

Categories

Resources