I'm attempting to implement gMap [1] on a website and I've got it partially functioning. The map shows up properly in Chrome and Safari but fails in Firefox, IE, and Opera (latest versions of all). I have the Google Map API key loading as the first javascript resource in my header, followed by jQuery and then finally my call at window load (in aaolm.js). Essentially what happens in the browsers that fail is that the map is partially rendered with the Google Maps controls but the actual map view is blank. In Chrome and Safari the map renders with no problems. The below page is an example of what's happening:
http://www.advancedaquarist.com/events/reefstock-march-12-2011
I'm really at a loss as to why this is happening. Any help would be appreciated. Thanks!
[1] http://gmap.nurtext.de/examples.html
I had this issue as well. Seems that a very common "responsive design" technique (img{max-width:100%;}) is to blame. If you can undo this by a max-width: none; on the images within the map divs, you're all set.
Its going to be a div sizing issue..
Try making the div that contains your map a specific size, rather than 100%.. and you will probably find your map appears..
There's a bit of info here:
http://econym.org.uk/gmap/basic19.htm
Duncan.
Related
I'm testing this page - it's live but not really public yet. http://info.iste.org/student-standards-contest
It is auto jumping to the start of the map (the header covers it a bit) in Chrome but not firefox or Safari. Does anyone know of a reason for this? My initial search attempts are not showing up anything promising. Does Chrome treat maps differently? Or are there any particular scripts that Chrome treats differently? I got the code to place the map direct from Google Fusion Tables if that is helpful.
This is a difference in browser behavior, but it's not because of google maps. You can see this by taking these steps:
Open a new tab in chrome
Open the console (ctrl + shift + i)
Go to the network tab of your console
Set connection to something very slow such as GPRS
Load the page
You'll see that the page does it's jump before google maps is even loaded. It's the other elements that are loaded onto the page shifting things around. Why Chrome does this and Firefox does not is probably some very minor difference in interpreting the page. There's a lot going on with that page so tough to say looking at it from the outside. Try removing elements that are loaded onto the page one by one and figure out which element is causing the jump.
I have read a lot and try a lots of different techniques to manipulate my google map in different way of resizing and everything but none have gave my decent results. The fact simply is that when I hit cmd-p in google Chrome I didn't see my map and the same operation work perfectly in other browsers... I have try many many times to remove all kind of styles possible from my code... I can only conclude that it's a Chrome bug ??
Cmd-p with Chrome 47.0.2526.106 (64-bit)
Cmp-p on the same page with Safari Version 9.0.2 (11601.3.9)
I don't think it's relevant here to put all the code that I use to generate driving directions and that stuff...
This just not working in Chrome !?
Thx in advance...
Serge Savoie
Twitter bootstrap is overriding some style that should not :
Here is the solution
#media print {
img {
max-width: none !important;
}
I'm working through this simple example of making a map from a dataset using Recline.js :: http://okfnlabs.org/recline/docs/tutorial-views.html
When I duplicate the steps, I get a white screen of death.
My code is hosted here: http://theplaceisnow.aedileworks.com/mappings/recline/TimeToRecline.html
I've checked the links of all the dependencies.
Chrome tells me that there are errors in the Leaflet.js and that the tiles will not load. I haven't found anyone else with the same error, but it's possible it's related to a correction made for an IE bug (although I'm using FF and Chrome): github.com/ckan/ckan/issues/1202
Any insights or suggestions would be appreciated
========================================================
Update :
I tried switching to Leaflet 0.4.4 which did not change the problem.
A friend suggested that the problem might be the body tag. I moved the body tag to before the script and that allowed Leaflet to run.
Tiles still don't load locally in a browser but when uploaded to a server, the map loads properly.
Your code shows you are using leaflet 0.7.3 while the tutorial you are quoting uses leaflet 0.4.4.
This should solve your problem.
If you look at recline project, you can see they added support to leaflet 0.7.3 very recently.
They have not yet updated their website which is hosted on github: https://github.com/okfn/recline/tree/gh-pages
Recline could not detect leaflet. If I disable recline.js and slickgrid, it detects any version of leaflet.
I have problems visualizing my google map within a jquery dialog. The problem is present only on ie 7 and ie 8, furthermore ie7 doesn't even show the map, ie8 shows it once and when you try to see it again, the map is misplaced.
Here is the scenario. I have a link which when precessed would show a dialog. The content of the dialog is loaded via ajax. The loaded page contains some other stuff apart from the map itself. In ie7 i don't see the page at all, i8 shows it correctly the first time around. When you close the dialog and open it again the map would no longer be visible.
The issue(s) is not present on all real browsers and ie9,but i found something strange. When the dialog is opened for the second time and I have dev tools open ( the developer plugin for IE) when I close it, or minimize the dev tools panel , the map is somehow refreshed and gets displayed correctly. Any idea what event my that be triggering. Any help would be appreciated.
Thanks,
Peter
Call the initialise function after dialog opens. For example, onfocus of a button or textbox.
onfocus="initialise();";
it works for me.... even in IE
Pretty sure gmaps v3 doesn't support IE7, the IE8 problem is kinda hard to assist you with without seeing the code.
The Google Maps JavaScript API V3 does support IE7+ (Source: Which web browsers does the Google Maps JS API support?) but I've seen issues when combining it with jQuery, sometimes they kinda collide on some object's property and mess up. Maybe you could cut this down to the simplest code possible and report it on the issue tracker?
I have a website that works fine in Firefox and IE but never finishes loading in Safari 4.0.4.
The live website loads a menu then loads a Google map. Using Safari, the Google map never loads.
I have a test website on the same server that uses the exact same code for loading a Google map and Safari can load the map (this is the one that won't load on my live web). This test website does not have the menu - only the Google map.
In both cases (live and test) the main web page calls a loadmap.js file.
I've been pulling everything apart to try to identify why Safari won't finish loading. Has anyone run across any problems/solutions with Safari that may help me find a resolution to this problem?
This is the site where I cannot see the Google map: http://appalachiantrail.rohland.org.
It's just a layout issue with your page in WebKit (the rendering engine in Safari and Google Chrome). The map is loading, but the background is only being rendered a few px tall. Try setting an explicit pixel height value on the div#map_canvas, instead of height:98%.