I'm struggling with adding Google Maps JS API to my Angular project.
In index.htm I have:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
async defer></script>
In my component, how is it possible to know that the maps api is fully loaded and available?
To be clear, for example, in Google Charts API, we can call:
google.charts.setOnLoadCallback();
to initiate other functions.
You can try using the onload event in you script tag:
example(https://codepen.io/larryjoelane/pen/BJmOxB?editors=1112):
<script>
function jsFileLoaded() {
console.log('file loaded!');
}
</script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" onload="jsFileLoaded()" async defer></script>
Related
I am using bing map in my application for searching.
Bing map V8 control.
I have used this CDN
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' async defer></script>
after that when I am trying to use Microsoft.Maps. It is saying:
Uncaught ReferenceError: Microsoft is not defined
new Microsoft.Maps.Color(100,100,0,100);
Any one have idea about this?
Don't use async while loading Bing API,
<script src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key'
type='text/javascript' ></script>
And if you are using jQuery then add $.ready() to use maps like
<script>
$(function(){
var color = new Microsoft.Maps.Color(100,100,0,100);
....
});
</script>
I encountered a similar error while using bing maps js sdk. All you have to do is to add 'windows.' before you write: Microsoft.Maps.Color(100,100,0,100);
So now the new code is :
new window.Microsoft.Maps.Color(100,100,0,100);
It is well known to everyone that using defer is an efficient way to minimize the loading time of a website.
In my project, I am using Vue (included in the header using defer) and in a circumstance, I want to use a component that is created by another person. When I try to do Vue.Component(...) in the body of the HTML, it says Vue is undefined. It seems that my script in the body is running before the external script has been loaded. Is there any way to fix this issue?
I tried to do document.onload, but the function itself is not working.
PS: Just to be clear, the external script is referring to my js file where Vue is defined and I am not talking about the third party library at all.
Instead of document.onload you need to use window.onload or document.body.onload.
But an even better way is to wait for the load event on <script> tag:
<html>
<head>
<script id="vue-script" src="vue.js" charset="utf-8" defer></script>
</head>
<body>
<script type="text/javascript">
function onVueLoaded() {
Vue.render();
}
if ('Vue' in window) {
onVueLoaded();
} else {
var script = document.getElementById('vue-script');
script.addEventListener('load', onVueLoaded);
script.addEventListener('error', () => console.warn('failed to load Vue.js'));
}
</script>
</body>
</html>
Here I also added a handler for the error event if you wanted to explicitly handle loading errors.
I have a function initMap() that is supposed to be called when the Google Maps API has finished loading. This function manages all of the settings for the map I use in my web-app.
initMap() lives in a file called init-map.js.
I'm migrating to Webpack, so init-map.js is now being included in index.js using require('./scripts/init-map.js.
I'm getting an error InvalidValueError: initMap is not a function, but when I load init-map.js using its own <script> tag, I don't get the error.
Causes error:
<html>
<head>
...
<script src="bundle.js"></script> <!-- init-map.js is required in this file -->
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
Works without issue:
<html>
<head>
...
<script src="bundle.js"></script>
<script src="./scripts/init-map.js"></script>
</head>
<body>
....
<script src="https://maps.googleapis.com/maps/api/js?key=🔑&callback=initMap" async defer></script>
</body>
</html>
I don't understand how to make initMap() available for the Google Maps API when it makes the callback.
I would also prefer to have the init-map.js managed within index.js.
I believe this is because the bundler changes the name of your initMap function to something like a single letter, e.g. e or f.
Please check your calling part. Is it throwing 404 errors? on inspect element -> Network
Try using from "./scripts/init-map.js" to "/scripts/init-map.js" or "scripts/init-map.js"
I am trying to embed google plus posts in my application.
I have loaded platform.js file in header
<script>
window.___gcfg = {
lang: 'en-US',
parsetags: 'onload'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer>
</script>
<script>
function renderWidget() {
gapi.post.render("widget-div", {'href' : 'https://plus.google.com/109813896768294978296/posts/hdbPtrsqMXQ'} );
}
</script>
In html page
Render the embedded post
<div id="widget-div"></div>
When I clicked on the link, it shows nothing. Is there anything to be added. Here is the reference i followed https://developers.google.com/+/web/embedded-post
You might be opening HTML file directly in browser, which could be problem in some browser(s) (i.e. In Google Chrome. You can verify the issue here).
Try running it using a local-server(XAMPP maybe) so the URL will look similar to http://localhost/yourpath/test.html
Hope this helps!!
I am trying the below code for implementing Google Maps Autocomplete text box in HTML
HTML:
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input type="" name="loc" class="form-control" id="location" value="">
...
</body>
JavaScript:
<script>
function init() {
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
The above code is working fine if I open HTML file in normal browser without using any server or local host. When I use the same code on local host, and click the text box, text box gets disabled automatically and throws the below error:
Google Maps API error: MissingKeyMapError js?v=3.exp&sensor=false&libraries=places:34
I was referring to this document ERROR: Google Maps API error: MissingKeyMapError and it says usage of the Google Maps APIs now requires a key after June 22 2016. I created key and used the library as mentioned in the document https://developers.google.com/maps/documentation/javascript/get-api-key but had no luck as the textbox is not picking the library.
Tried below library replacing YOUR_API_KEY with the key generated for me:
<script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
When I use this library, it is not at all picking any location, and text box is showing empty.
I am getting this issue only when I use the Google API on a local host. Could someone help me how to get rid of this error?
After generation of key, what is the exact library that should be used?
I am getting the below error after using the below two libraries:
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places">
<script async defer src="https://maps.googleapis.com/maps/api/js? libraries=places&key=API_KEY&callback=initMap"
type="text/javascript">
Error:
Uncaught js? libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function
I am using the same javascript code as mentioned earlier.
You need to include both the key (with localhost as an allowed referrer) and the places library.
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
from the documentation on libraries:
The following bootstrap request illustrates how to request the google.maps.geometry library of the Maps Javascript API:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>