I'm using Google Maps v3 and want it to load faster.
My setup:
At the end of a .js file
google.maps.event.addDomListener(window, 'load', initialize);
And at end of the HTML page code:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
How can I make the map appear on screen quicker?
You don't need to include both of these scripts:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
especially if you only using Google Maps. If you are using more than one of these Google APIs (or these JavaScript libraries), include only http://www.google.com/jsapi. Otherwise, if you are only using Google Maps, include only http://maps.google.com/maps/api/js?sensor=false. This along will save one request.
You can't really make the maps load quicker, but one of the tricks you can do is load a static map first using Google Map's Static Maps API so it will appear to load faster.
Another trick is to load the maps only when the user asks for it. However, without knowing what your site's requirement is, it's hard to tell. With the Google library loader, you can do
google.load("maps", "3", {other_params:'sensor=false', callback: function(){
var map; // initialize your map in here
});
or if you are not using the library loader, you can do this.
you can add an eventlistener to a button and dynamically create and fill a new iframe with the map as a content? This way the map will not be loaded untill the button has been clicked.
var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
if($('#iframe').size == 0) {
$('#iframe').load(map, function() {
$('#button').unbind('click');
});
}
});
Of course you'll have to style the iframe and position it right, this is just an idea.
Related
As I said in the title, every time I refresh my webpage, the Google OAuth has me log in again. I'm new to the Google OAuth thing and I'm just using the docs for the Google Calendar API. I'm trying to make a web app that lists everything on my calendar. I've attached the code I'm using below. If anyone could help, it'd be very much appreciated!
JS Script used for logging in: https://pastebin.com/XDBmwzgc
HTML Body tag: <body onload="handleAuthClick()">
HTML Script tags: <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script> (in HTML head),
<script src="./calendar.js"></script> (in body),
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script> (in body).
There is a cross-window iframe, which contains a link to index.php from another server, which, in turn, has a Yandex maps api script (see below). How to make sure that this script chain is fully loaded? I'm trying the following way:
<script>
function loaded() {
window.parent.postMessage('loaded', '*');
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://api-maps.yandex.ru/2.1/?apikey=bla-bla-bla&lang=ru_RU" type="text/javascript" onload="loaded()"></script>
The message arrives, but the map is not displayed. Which, in my opinion, means incomplete loading of scripts.
Chain of yandex map scripts
Subscribe to ymaps.ready(). https://tech.yandex.com/maps/jsapi/doc/2.1/ref/reference/ready-docpage/
ymaps.ready(() => notify())
I am fighting this problem for almost a week. After googleing it a lot I decide to put here exactly what is my problem to see if someone can provide some light.
I am developing a website application using google chart. I am developing it with Visual Studio 2013 in ASP .NET. The application is published in IIS 8.5. The weird thing is that it was working fine until last week when I had do perform a server restart. After restarting it the application seems to be no able to load the JS API (not just google chart but any JS, including JQuery).
If I copy a google chart example (plain html with JS inside it) and open in Chrome it works so the javascript api is loading. The problem happen just when I try to run it from inside VS Studio (the erro message is [0x800a1391 - JavaScript runtime error: 'google' is undefined] or try to publish it.
Could it be some kind of network policie blocking it? How can I check it?
Here is the head of the default.aspx file
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.gstatic.com/charts/loader.js">
google.load('visualization', '1', { packages: ['corechart', 'bar', 'table', 'controls']});
</script>
<script src="GraphsAndTables.js"></script>
<script>google.setOnLoadCallback(DrawAll);</script>
As you can see the src are correct (I double check it and it loads in plain htlm).
I change the position of google.load() but it still giving the same erro.
You are using old library loader code you need to update your loader code or load both the old library loader and the new library loader.
Limitations: For Geochart and Map Chart, you must load both the old library loader
and the new library loader.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Your code should look like below
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>// Old Library Loader
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart', 'bar', 'table', 'controls'] });
</script>
Check Google documntation to Update Library Loader Code
I am trying to get a google map loaded into a post.
In the header i load:
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
In the post in wordpress i load:
<div id="map_div"></div>
You can see the .js here: http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js
The map does not show at all, so i am hoping you guys can help me with this.
As #Anto Jurković mentioned in the comments you need to include your parking.js at last.
You're initialize the map and other objects when these objects don't exist yet because your jquery and Google Maps are loaded later. Also you don't provide your API key when you load the maps javascript, so Google won't provide you the map.
So it must be:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.ateo.dk/wp-content/themes/ateo/js/parking.js"></script>
How you can get the API key is documented in the official Google Maps v3 Documentation.
TL;DR: You'll get it with the Google Developer Console
None of the above worked. It does not matter when the script is loaded, and the script should also be loaded using the functions.php in wordpress i found out.
The div should have a size property, and this resulted in the map being displayed
we are using Google Analytics script on all pages below:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXX-1");
pageTracker._setDomainName(".mydomain.com");
pageTracker._trackPageview();
</script>
I need to change a the last line in the script to pageTracker._trackPageview("Success"); at run time. The Google Analytics injects this script at some point in the page building process. It's a bit tricky because once the Google Analytics module is added, it runs for all pages requested and puts this scrip at the end of the body tag.
Is there a way to examine the HTML, parse it, find that line and edit it? What's the best way to accomplish that?
Thank you.
SiteAnalytics.config, located in the DNN root, allows you to globally modify the analytics script and have some control over where it is injected.
I have used it to load the new asychronous analytics script to <body> instead of <head>, in order to avoid the the problem in the default configuration, where title element is positioned after the script, and "Content by Title" reports won't work.
See Also
How to set up Google Analytics asynchronous tracking in DotNetNuke
(the ‘new’ version of the GA tracking code)