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.
Related
I know this has been asked before. But the situation is that I'm referring the function before loading the map api.
This was working a few days ago, and started giving me this error out of nowhere. I'd be grateful if someone could help me.
Error:
//HTML
<script src="assets/js/scripts.js"></script>
<script>
var markers = [];
function myMap() {
var mapProp = {
center: new google.maps.LatLng(39.7312983, -7.5951745),
zoom: 5
};
var image = 'https://imgur.com/9SsOEZu.png';
var map = new google.maps.Map(document.getElementById('google-map'), mapProp);
//Some PHP
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=myMap">
</script>
</body>
</html>
Well, I solved it. The problem had nothing to do with Google Maps API but with a badly inputed value in the database that caused the code to crash before loading any JS.
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 understand that Google updated their map a day or two ago. Since the update, the weather layer no longer works on the webpage I am building. I have a MacBook Air with Apache server installed.
When the map loads the marker still works and the latitude and longitude are correct, but the city names no longer show nor does any of the weather features.
Here is what I have tried to fix the issue:
* I tried the three different web browsers that I have installed on my MacBook - Firefox, Safari, Google. Same issue in all three.
* I tried turning my Mac off and back on again.
* I went to the Google maps API website and according to that my coding is correct.
* If I do set the zoom property to 13, the city names will show up but no weather layer...which I understand is the proper behavior with a zoom setting of 13 or higher.
* On the Google maps API website, I copied and pasted the example code for the weather layer and it worked! They have a latitude and longitude of a country outside of the USA. I compared my coding to the example coding and my coding is the same, except for the latitude and longitude. SO, when I changed the latitude and longitude in the example coding to another location the weather layer stopped working.
Here is my code, but it seems to me that the issue is on Google's end. It was suggested that I post the question here (I already posted this question at productforums.google.com) because employee's from Google will see this question.
var map;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(40.0157394, -105.2792435),
/*center: new google.maps.LatLng(49.265984,-123.127491),*/
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_CENTER
}
};
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
/* Weather */
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
/* Marker & InfoWindow */
var marker = new google.maps.Marker(
{
position: mapOptions.center,
map: map
});
var text = '<div id="mapText">' + 'I live in beautiful Boulder, CO!' + '</div>';
var infowin = new google.maps.InfoWindow(
{
content: text,
pixelOffset: new google.maps.Size(0, 20)
});
infowin.open(map, marker);
google.maps.event.addListener(marker, 'click', function()
{
infowin.open(map,marker);
});
};
google.maps.event.addDomListener(window, 'load', initialize);
To work around the issue for now, I set my zoom to 13 so at least the city and street names will show, and the weather features are disabled when zoom is set to 13 or higher.
I'm pretty sure my coding is correct. Any ideas will be appreciated.
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.