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
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.
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.
This question already has an answer here:
Google geocoder throwing MissingKeyMapError on one page but not another [duplicate]
(1 answer)
Closed 6 years ago.
I have 3 websites with this google maps code which is working fine:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(38.7223956, -9.1358012);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Something'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
h1 { background:none; padding:0; }
#map-canvas {
width:100%;
height:250px;
}
</style>
<div id="map-canvas"></div>
It's working great also if I'm just putting it on an html file on my hard drive.
Recently, I started a Wordpress project on my localhost and I don't know why but when I'm adding this code to my project I get this:
Oops! Something went wrong
Obviously I have already wordpress websites that working with the same exact code, I have no idea why suddenly I'm getting this message, It's unbelievable
Judging by your link it looks like you're not setting an API key. If you are using the Google Maps API on a domain that was not active prior to June 22nd, 2016, it will require a key going forward.
See this link for an answer: https://www.latecnosfera.com/2016/06/google-maps-api-error-missing-keymap-error-solved.html
The Google Maps Javascript API requires an API key.
Enforcement began some time in June I believe, but sites with a decent amount of traffic which were already using the API without a key got grandfathered in and don't have to comply (yet). That's why your other sites still work but new ones do not.
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.
First of all, I hope you are all fine.
I am currently working on my assignment and i need to achieve these:
Show map with 1 marker if user is logged out
Show map with route if user is logged in
I managed to do both however they only work separately.. after a while i found out that the following was the cause:
<script src="http://maps.google.com/maps?file=api&v=2&&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" />
Apparently i can't have them both together >.< so my question is.. Is there a way to go around this please?
The following is the JavaScript code that i'm calling from code behind via ASP.NET since i get the values from my database. They are basically creating my maps.
<script type="text/javascript">
var map;
var directionsPanel;
var directions;
function initialize(lng, lat) {
var latlng = new google.maps.LatLng(lng, lat);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({position: new google.maps.LatLng(lng, lat), map:map});}
function setRoute(log, lat, from, to) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(log, lat), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: " + from + " to: " + to);
}
</script>
Excuse me if my code is 'not that good' or there was a better approach for it. This is actually my first time working with JavaScript.
Thank you for your time :)
You're loading two different versions of the Maps API -- V2 and V3. You should use only one; I recommend V3 since V2 is deprecated.
V3 is the latter of the two you references: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Afterward, check the reference for V3 at http://code.google.com/apis/maps/documentation/javascript/basics.html
Exactly what Kai said.
Keep in mind though, when you're upgrading to V3, you will most likely have to change some of your calls. For example: new GMap2(document.getElementById("map_canvas")); is not in the v3 API.
To do the least amount of work, you can figure out what uses v3 and what uses v2. Then just move to the one that has the least changes. But I also recommend to upgrade to v3 if you have the time/resources.