Does Chrome treat google map loading differently? - javascript

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.

Related

Find conflicting Javascript with browser developer tools?

I'm trying to debug a CMS-backed website (Drupal 7). It is displaying some problems due to conflicting Javascript. For a fraction of a second, the site components are fine, and then *SNAP*, they're broken. It must brake as soon as the conflicting resource loads.
Using Chrome's developer tools (or Safari, Firefox... even IE's), is there a way to load the page, one Javascript resource at a time? This way I can see exactly which resource loads when the page issues appear.
(I'm also open to better ways of debugging this kind of thing.)
You can use the Pause on exceptions feature of DevTools, in Sources Tab, it is the hexagonal pause button at the far right.

How to debug non-dynamic script after dynamic script loads on the same page

This answer https://stackoverflow.com/a/10929430/749227
to this question Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool? is spot on for debugging dynamic scripts.
The issue I am facing is that I have a page that has a script on it, and after it loads an ajax request fires which returns with some HTML and a script that get put into the page. With the //# sourceURL=myDynamicDocumentFragment.html bit added, I can debug the dynamic script just fine.
But once it's loaded, then the other script that is part of the outer page that initially loaded goes off the rails. I can set breakpoints on blank lines and can't set them on legitimate lines. The debugger will stop on them but it won't be at the place in the code where I'd expect.
What it appears to be is that the dev tools window is showing the original script, and the debugger itself is running on something else - some updated version of code that includes both the outer page's script and the dynamic script that was added later. Or maybe it just hiccups with respect to line numbers it's displaying and what those map to in the code it's actually running.
I wish I had a good simple code snippet to demonstrate the issue, but I don't. Has anyone seen this, and does anyone know of a way to have Chrome 'refresh' the dev tools scripts/debugger without refreshing the page? (it has to be w/o refreshing the page since things work fine when the page loads - it's only after the dynamic script is dropped in that the wheels come off)
Note: I've tagged with Chrome since that's what I'm using (v 38). I don't know how other browsers fare.
You can find scripts injected into head or evaluated, here is a break point added on youtube evaluated (another js file).
You can find this in chrome as well, adding console.log (click on message shown), and voila you have source code you can add break points.
Here mozila print debugging/breakpoint over evaluated script on utube page:
Update
Sorry, I understand chrome was out of the scope, my engrish :)
How I did debugging on chrome over injected scripts, but there are cases when you cannot attach to execution if script is active (page load plus few milliseconds), you need to search for workarounds.
Added this at the begin of the script injected:
//# sourceURL=jseinjectedsource.js
console.log("evaluated");
and voila console:
Better check this way better than my explanation chrome developer
Check to see if your script is using a source map (if you're using TypeScript this is typically on by default for VS projects).
I've found Chrome to be really bad with source maps, often refusing to update them, or stop displaying them after the source map line is removed from the code.

How to guarantee script loading in Google Chrome : defer doesn't seem enough

I'm reading this tut series on Google Chrome here http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ by clicking next I would go on next page http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/
Problem is that rather often nothing draws : I have to create a new tab and copy and paste the url instead of clicking next page.
So it seems that in Google Chrome script like kinetic js library used here cannot load reliably even with defer attribute used in the page doesn't seem enough.
How could one fix this?
It actually is a bug in chrome 29, should be resolved in chrome 30.
As a temporary work-around you can enable #disable-accelerated-2d-canvas in chrome://flags

Google Maps V3 within a jQuery UI dialog for IE7/8

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?

GMap Problem with Certain Browsers

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.

Categories