I have an ionic app. I can the goggle maps api in the index.html using
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&sensor=true&language=en&libraries=places"></script>
However my app has 2 languages which I translate using angular translate.
When the app is translated, the map and the geocoder doesn't change language. So I tried to add another
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&sensor=true&language=ch&libraries=places"></script>
in index.html
But seems like it only takes one. How can I solve this?
AFAIK the Geocoder uses the browser's preferred language, or language specified when loading the API (see https://developers.google.com/maps/documentation/javascript/basics?csw=1#Localization).
I don't think you can load two times the API with two different languages specified. Instead you can try to load the API only when your local language is set (only one at a time).
Related
I am looking to use Google's cast SDK (for sending) in the Web app that I am working on; In google's documentation and codelabs (https://developers.google.com/cast/codelabs#:~:text=Codelabs%20are%20sample%20apps%20with,Also%20see%20Sample%20applications.) it seems that the only way to load the SDK is to use
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
This won't work for me because I am writing a React+JSX web app. I can't just load the script through a script tag as the other elements that need to get rendered, such as the
<google-cast-launcher id="castbutton"></google-cast-launcher>
Aren't recognized as valid JSX elements.
How can I make this library available to my code? Is there anything like
yarn add cast-sdk
that exists that I can use to get the sdk?
You can load the script directly on your index.html file. This way the script will load once together with your App.
Or you can dynamically load the script in the js like it is explained here, but this way the script will be loaded/unloaded every time the component is mounted/unmounted.
I've a Backbone application, which initialises from index.html. I tried adding new amp html called index.amp.html and followed instructions in Create Your AMP HTML Page.
My index.html has only hook to require js to start loading backbone app. All the html is generated dynamically.
Is there a way I can include AMP practices in dynamic generated HTML? Because all I have is one index.html entire content is generated through handlebars dynamically on client side.
I didn't find any good article to make SPAs to support AMP. Are there any best practices to follow? Please help me out.
At this time, the only JavaScripts that can be triggered in an AMP document are these two scripts:
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
You can use a mustache template as part of the custom-element script as follows:
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
The templates are described here:
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-templates.md
Without access to your code, can't say how easy or difficult it may be to modify your handlebar templates to fit the model above.
I am new in Angular and Maps, but however would like to try the Angular Google Maps.
When reading the quickstart I am confused at the 3rd point
:
Include the Google Maps API v3, via one of two ways:
Google Maps SDK Async Loader New in v2.0.0
Google indicates using
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
The quiqkstart proposes also the second option:
Directly load into your HTML page. Example:
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
If the second option is clear, the first confuses me.
Is the difference between first and second option just adding async defer to the script tag?
Where the API key should be used? in the config of Angular Module or in the google maps script?
PS.
The code sample the dev team gave as example didn't clarify either this question, because they didn't use any key at all for the maps initialization...
In the first case you provide a callback (initMap), which will get called, as soon as the map-script is loaded asyncronous. You can configure the map programmatically.
In the second case the script will be loaded and can be used by angular-google-maps later. You have to configure the map over the url.
The difference is with the API key, your account can be bound to additional libraries from within the google console. You require an API key and additional libraries to your liking (directions, geocoding, e...) for certain domains.
The call to your script resource can be kept simple.
The libraries have to be managed within the console.
Without an API key you can load gm with additional libraries as well. But your domain is limited to an amount of request / day.
//maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&callback=asyncGoogleMaps
If you simply use a script tag in the head section of your page, there's almost no issue in loading the library.
But if you work asynchronously, you'll have to create a global function to map the script initialisation. Else it won't work since the script can't write to the DOM.
If you need to pass in an API key to the javascript, you can set a scope variable in your controller
$scope.googleMapsUrl="http://maps.google.com/maps/api/js?v=3.20&client=XXXXenter-api-keyXXXX";
This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.
<div map-lazy-load="http://maps.google.com/maps/api/js"
map-lazy-load-params="{{googleMapsUrl}}">
<map center="41,-87" zoom="3"></map>
</div>
As read on angular-js-googlemaps.
As we know, angular is a good MVC framework to build your application with single page, but I'm afraid that if taking too much work in one page, will it be a problem to load lots of javascript libs in index.html? some issue like loading slowly or even performance/network issue.
As my demo below, there's lots of js libs, and about the 'test/restful/restful.js', I want to load it when my router goes to restful.html, but I need to declare the controller in router, in index.html, otherwise the 'RestfulCtrl' cannot be recognized by angular lifecycle, so how to separate resources to reduce the work of index.html, or it is the common defect of single page MVC
The size of your controller is tiny compared to the size of all the libraries (jquery, angular, etc.) you're already loading. Having one HTTP request for each and every controller or service JS file is obviously not a good idea, but you should simply concatenate and minify those at build time, and have a single JS file to load that contains your whole application. So
<script src="app.js"></script>
<script src="FirstCtrl.js"></script>
<script src="SecondCtrl.js"></script>
<script src="FirstService.js"></script>
<script src="SecondService.js"></script>
should become
<script src="myCompleteApp.min.js"></script>
You can also choose to concatenate all the libraries and your own minified application into a single big file if you prefer, which would allow loading a single big JS file containing everything, in a single HTTP request.
Grunt and Gulp are the two main tools used to do that.
I would like to know if it is possible to nest/tunnel javascript rendered sites.
What I mean concrete:
I got a site bugs.example.org which serves a bug tracker application built on Backbone Routers, Views and Models.
over bugs.example.org/#/mybugs we can list all our bugs.
Now I have for example a second project worksuite.example.org.
This project serves roadmaps, presentations, etc. unfortunately this worksuite app doesn't serve an independent bug tracker. Instead it has a joint venture with bugs.example.org.
Now worksuite.example.org want to include/nest the bugtracker views in its own application.
This could look like:
worksuite client calls worksuite.example.org/#/bugs now the worksuite app calls a GET to bugs.example.org/#/mybugs and does a $el.html(requestedContent).
Does this work?
Another application which could work similar, which I know is the google captcha service which you nest with some js
Is there a keyword for such behavior?
Depending on how well the backbone app is architected, you can have worksuite.example.org just pull all of bugs.example.org's JS files, but use its own base html/css:
<!-- on bugs.example.org -->
<script src="mybackbonestuff.js"></script>
<link href="mycss.css"></link>
<!-- on worksuite.example.org -->
<script src="http://bugs.example.org/mybackbonestuff.js"></script>
<link href="worksuite.css"></link>