I have a problem with Google Maps Javascript Api.
I want to detect if my daily limit quota of 25,000 map loads per 24 hours as described here is reached.
I already searched for a lot of similar questions, as [1, 2, 3, 4], but they:
have no useful response (1)
use other Api and not Google Maps Javascript Api (2)
refers to geocoding and not map loading (3)
use Google Api Console (4)
The only question that I find useful is this.
It refers to Google documentation, that says:
If you want to programmatically detect an authentication failure (for example to automatically send an beacon) you can prepare a callback function. If the following global function is defined it will be called when the authentication fails. function gm_authFailure() { /* Code */ };
If I have a simple script like this:
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 42.345, lng: 12.46 }
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
How can I implement function gm_authFailure(), in order to detect query limit reached?
I'm new to Js and have no clue how to do that. Can you give me some examples?
you just need to define your function globally, like this
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 42.345, lng: 12.46 }
});
}
function gm_authFailure() {
alert("test"); // here you define your authentication failed message
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
<div id="map" style="height: 500px; width: 500px;"></div>
Related
The target is to embed a Google Apps Script gadget into my Google site. The function of this script is to show a google map, determin the location of the client and center the map to the found location.
The relevant command for getting the position is navigator.geolocation.getCurrentPosition.
The issue is that the security layers block the execution of this command when used with Chrome. (It works in Firefox and Safari. Also when I use "test web for your lates code", it works as intended).
Debugging the browser reveals the following error message:
"Geolocation access has been blocked because of a Feature Policy applied to the current document. See (here comes a link) for more detail."
Following the explanations in the offered link, it results in the suggestion to apply a instruction for geolocation in the iframe command like:
<iframe src="https://example.com" allow="geolocation"></iframe>
Now here comes my problem:
Since I can only use the functions in the Google Site editor to embed a GAS gadget, I have no option to modify an iframe instruction with such a parameter. Therefore, I do not know how I can pass this parameter into the web site.
The question is: Is there a method at all? If yes, what is the correct way to do it?
I have investigated a lot and also tried to add parameters to the doGet function in the sense of:
function doGet() {
return HtmlService.createHtmlOutputFromFile('pmtest')
.setSandboxMode(HtmlService.SandboxMode.IFRAME) .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
But this did not make a change.
Here now my code:
code.gs :
function doGet() { return HtmlService.createHtmlOutputFromFile('pmtest') }
html code (pmtest) :
<!DOCTYPE html>
<html>
<script
src="https://maps.googleapis.com/maps/api/js?key=...here is me key ....&libraries=places&callback=initMap">
</script>
<script>
var myCenter=new google.maps.LatLng(51.158742,6.7170850);
function initialize()
{
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
alert('success');
var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
alert('myLatlng : ' + myLatlng);
myCenter = myLatlng;
CenterMap();
marker.setPosition(myCenter);
}, function(error) {
alert('error');
});
}
var mapProp = {
center: myCenter, zoom:18, gestureHandling: 'greedy', tilt: 0, draggableCursor: 'default',
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({ position: myCenter});
marker.setMap(map);
function CenterMap(){ map.panTo(myCenter);}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap" style="width:1200px;height:700px;"></div>
</body>
</html>
In case you want to open the test page, here is the link:
https://sites.google.com/site/pmtest4711/
When the geolocation command could be executed, a message will appear with "success" and a second with the found position. The google map then shows this location (wherever you are.).
Any good hint would be appreciated.
hello I have a problem I wish to integrate ue google map in my site but I do not understand it appears when I update the page but then it disappears. In the console it says "no APIkey" but I did it several times. I followed the site: developers.google
but I do not understand where the error lies. I put the html part if a person understand the error please ! I also follow this topic google api in my website but nothing appears !
<div id="map"></div>
<script>
function initMap() {
var ff = {
lat: 50.638181,
lng: 3.058227
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: ff
});
var marker = new google.maps.Marker({
position: ff,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWdGA-ndsHMtR5-cdZrc5SHtfKKBG5Bfg&callback=initMap">
</script>
Console says:-
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
so activate your google map API key under project.
Your API key is not activated. Make sure to generate a new one following the guide: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de
I want to:
Render a google map on a web page;
Have the map centre on a user's current location;
Show places local to that user.
Question: Assuming this is possible (and that the limiting factor is my current ability), how might this be achieved?
Resources:
I am using the Google Maps JS API v3 and Places Library
Currently, I can achieve either rendering places around a hardcoded location or centring the map on the user.
I have used this Geolocation code and this Places Search code assuming that I could integrate the code of one into the other (by handing lat/long values from the geolocator into the location object pyrmont).
There exists a SO question on this for Google Maps API v2, deprecated by v3.
First thing you need to do is define the map:
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places&callback=initMap" async defer></script>
this tells us that we are using the places library and on callback we are going to call the initMap function.
function initMap() {
var london = {
lat: 51.5073509,
lng: -0.12775829999998223
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
london = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(london);
setPlaces(london);
});
} else {
// Browser doesn't support Geolocation
//since you set coords above this section it will default to that
setPlaces(london);
}
map = new google.maps.Map(document.getElementById('map'), {
center: london,
zoom: 15
});
}
The initMap function initialises the map. We set var london to the co-ordinates of London in case the user does not have location turned on.
We then check to see if their location is turned on if (navigator.geolocation) {does this. if this is true then we override london to the users position. If changed we then move the map to the users location.
both outcomes will call:
function setPlaces(location) {
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 1000,
type: ['store']
}, callback);
}
Which gets the places around the location (either user or predefined)
A working example can be seen here, for parameters etc just read the API.
JSFIDDLE: https://jsfiddle.net/4kgy68rg/1/
There is a problem with my google maps here
it is visible on my pc, also with other browsers and in a private session and other devices.
Unfortunately it is not visible for my customer, the owner of the website and some other devices.
The console says
Google Maps API warning: NoApiKeys
and
You have included the Google Maps API multiple times on this page.
This may cause unexpected errors.
This is what I have:
<div id="map" style="width:100%; height:450px;"></div>
<script>
function initMap() {
var myLatLng = {lat: 50.8394968, lng: 4.2694918};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"<p style='text-align:center;'>Wellness All-In <br>"+
"Broekstraat 56 – 1700 Dilbeek<br>"+
"0496/44.55.56<br>"+
"aline#wellnessallin.be</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5RLhWKFn4P2XVc8G_yho1oun7xS1RtfU&callback=initMap"></script>
</div>
Does anyone know how to fix this?
You have included Google Maps twice. Once with the key
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5RLhWKFn4P2XVc8G_yho1oun7xS1RtfU&callback=initMap"></script>
and once without
<script src="http://maps.googleapis.com/maps/api/js"></script>
Remove the second include statement.
Your site also shows the following error :
Google Maps API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized:
http://www.wellnessallin.be/contact.php
Make sure your website is added to the list of allowed referrers in Google API console for the specified key.
Im getting error as invalid Google API key error.
The page is unable to display a google Maps element. The provided Google Api key is invalid or this site isnt authrozied to use it. Error Code invalidKeyOrUnauthorizedURLMapError.
Following is the script in head
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmo6D4JJMMv-HIDDENHIDDENHIDDEN"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
};
var map = new google.maps.Map(document.getElementById('googleMapView'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
There is no referrer added so far as im trying only in localhost. Browser KEY
How to resolve the error
Found it working by enabling the few more google map API.