I'm building a site for a customer who wants a map on their "About Us" page showing their locations. I have the map working and fully functional on the desktop site (www.al-van.org/jake/aboutUs.html) using the Google Maps Javascript API. Everything is going good but when I try to view the site on my android device, I just get an "Oops something went wrong see the error console for more technical information" which doesn't help me a whole lot. I can't seem to figure out what is going on and why it won't work on mobile. I need to use the Javascript API because the client wants 2 locations on the map and the embed api won't do that. Here is my JS, the HTML is a simple div with a bootstrap framework.
<script>
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 42.389795, lng: -86.258617},
styles: [
{elementType: 'geometry'},
{elementType: 'labels.text.stroke'},
{elementType: 'labels.text.fill'}
]
});
// array used to label markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath:
'googlemaps/m'});
}
var locations = [
{lat: 42.390337, lng: -86.259642},
{lat: 42.388635, lng: -86.257246}
]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=API_KEY&callback=initMap"></script>
After working with Google Support, it seems that the issue is in the way that the android Chrome puts in the website. I had explicitly set my allowed HTTP referrers all including www.blahblahblah.com and various variations using wildcards. What I DID NOT DO was include a wildcard in place of the "www" When I placed my wildcard as blahblah.com it allowed it to work on the mobile phone. For some reason, unless you explicitly type "www.example.com" into your android Chrome browser, it will not auto-fill the "www." This is what solved my issue, I hope it helps in the future.
Your API key is invalid for the domain, or is over it's quota limit.
Go here: https://developers.google.com/maps/documentation/javascript/get-api-key
To get an API key for the domain you are using.
Related
I am using Google Satellite map on an application. It was working fine and suddenly the map images start not showing. Instead of the terrain images, the map is showing the message "Sorry, we have no imagery here".
It is happening on my office IP and other testers' IPs. If I access from another IP or mobile data it works and shown the satellite images. I am not sure if google blocks IPs in case of continuous access on the maps.
Also I am able to see a lot of errors accessing the images
While clicking on the links for loading images, I am getting an error page like below instead of the map tile image.
Any clues on this issue is appreciated
To avoid showing these errors, in case they are due to the use of a zoom level that is too high for the area you are viewing, you can use the MaxZoomService. Kindly note that the below code snippet doesn't work because apparently access to the service without an API key is not possible.
Copy the code and test it with a working API key.
var map, maxZoomService;
function initialize() {
maxZoomService = new google.maps.MaxZoomService();
var myLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListenerOnce(map, 'idle', function() {
checkZoom();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
checkZoom();
});
}
function checkZoom() {
let zoom = map.getZoom();
maxZoomService.getMaxZoomAtLatLng(map.getCenter(), function(response) {
if (response.status !== 'OK') {
alert('maxZoomService error: ' + response.status);
document.getElementById('max-zoom').innerHTML = 'n/a';
document.getElementById('max-zoom-service').innerHTML = response.status;
} else {
if (response.zoom < zoom) {
map.setZoom(response.zoom);
document.getElementById('max-zoom').innerHTML = response.zoom;
document.getElementById('max-zoom-service').innerHTML = response.status;
}
}
document.getElementById('curr-zoom').innerHTML = map.getZoom();
});
}
initialize();
#map-canvas {
height: 130px;
}
span {
font-weight: bold;
}
<div id="map-canvas"></div>
Current Zoom Level: <span id="curr-zoom"></span><br>
Max Zoom Level: <span id="max-zoom"></span><br>
Max Zoom Service Status: <span id="max-zoom-service"></span>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
If the zoom level is not the issue, make sure that you are using a valid API key. In any case, it might be worth creating a new key and trying again with that one. If that still doesn't work, I would try to contact Google directly with more information as it might be that your network IP or IP range was banned by Google for some reason.
I know this is an old question but, I recently got this error too. So, the problem, in my case was the version of the API script I was using.
I'm answering this because I didn't found this solution over here, so, just in case someone was getting the same error.
Just adding v=3.35 (version number) to the url and it works.
Example: https://maps.googleapis.com/maps/api/js?v=3.35&key=API_KEY...
They explain here:
https://developers.google.com/maps/documentation/javascript/versions#an-update-affected-my-application
Thank you for all the response and I was able to find and fix the real issue. Adding the details here for reference.
I have contacted Google support with the request details and they were able to figure out the exact problem. The reason is their image servers are blocking the request from this project (hybrid mobile project - Android) since it found out that there are invalid request is also coming from the project. The invalid request is referred to as the requests without proper header information.
Based on that information, I could find out that a caching mechanism in the project was trying to cache the images and that is which sends the invalid requests. Adding proper header to that cache mechanism solved the issue forever.
I am using the Google Maps JavaScript API in combination with an api key. This works great for some hours or days, but after a specific intervall I get the following 403 error and the map is gone:
I don't know where the problem is because I didn't have reached the 25.000 requests per day yet. If I reset the api key and reload the page the map is loading correctly again, but I don't wanna reset the api key again and again.
As you can see I am using a custom map, but I don't think that the code is the problem, but here is the code:
(function(window, google){
var infoWindow = null;
function init() {
var map;
var mapOptions = {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng(
51.050409,
13.737262
),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('map'),
mapOptions
);
setMarkers(map, locations);
infoWindow = new google.maps.InfoWindow({
content: "holding..."
});
}
function setMarkers(map, locations) {
var i, icon, marker, contentString;
for (i = 0; i < locations.length; i++) {
icon = '../Images/icn-marker.png';
contentString = '<div><b>' + locations[i][0] + '</b><br>' + locations[i][1] + '<br>' + locations[i][4] + '</div>';
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
title: locations[i][0],
icon: icon,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', init);
})(window, google);
Any my script include looks like the following:
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script src="http://example.de/example/map.js"></script>
Hope you can help, because I dont' know where the problem is.
The 403 error response indicate that your API key is not valid or was not included in the request. Please enxure that you have included the entire key and that you have enabled the API for this key.
Also, check your usage limit, if you exceed the usage limits or otherwise abuse the service, the web service will return a specific error message. If you continue to exceed limits, your access to the web service may be blocked. It is also possible to receive 403 Forbidden responses.
The problem can be address by combining two approaches:
Lowering usage, by optimizing applications to use the web services more efficiently.
Increasing usage limits, when possible, by purchasing additional allowance for your Google Maps API for Work license.
Note:
When requests fail, you should ensure that you retry requests with exponential backoff. For example, if a request fails once, retry after a second, if it fails again, retry after two seconds, then four seconds, and so on. This ensures that broken requests or wide scale failures do not flood Google’s servers, as many clients try to retry requests very quickly.
Here's a related SO ticket encountered 403 error response: Google static map API getting 403 forbidden when loading from img tag
I'm trying to develop an asp.net project using Google Maps and JavaScript. For three days my map was opening perfectly. But today the map zoom and other map control buttons are coming but map doesn't come. Instead map grey blank is coming.
HereIsTheImage and here is my js code:
function LoadHarita() {
var myLatlng = new google.maps.LatLng(33.3, 33.3);
var myOptions = {
zoom: 16,
center: myLatlng,
disableDefaultUI: true,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
}
What's the problem? The map quota or limits? But what kind of limits for 3 days? I didn't understand it.
Thanks guys. Solved the problem. Here is the details if anyone needs it.
I opened the console by pressing F12. There was saying that i've added multiple maps.
I wrote the google map javascript codes under http://maps.google.com/maps/api/js to top of my javascript code. I deleted all these code on my js. And my map comes :) Normally i won't able to reach the map yesterday because i've added these codes yesterday. Maybe cookie is the reason. Whatever my map comes :) Thanks again
I had the same problem. Turned out it was Internet Explorer's 'Compatibility view' that was wrecking Google's Map code when running in localhost. Turning compatibility view off in IE11 made it work again.
The API call limit for Google Maps is 25000/day or something. It's very unlikely you managed to hit that just by playing around while developing. Try running your code in different browsers to see if it makes any difference.
I have been searching the web for a while looking for the option to create a marker on Google Maps with a letter (a.k.a. these: https://maps.gstatic.com/mapfiles/markers2/red_markers_A_J2.png). I know Google offers Dynamic Options (https://developers.google.com/chart/image/docs/gallery/dynamic_icons) but that is now deprecated, plus the icons look old school, not like the ones in the link above.
So Google used to offer this option in the API but now looks like it's only available for themselves? Isn't that weird?
It’s not part of their API, but I’m sure they wouldn’t mind if you borrowed their image for your maps. Just upload the PNG to your own server and instantiate your marker like:
var markerImages = {
a: new google.maps.MarkerImage('red_markers_A_J2.png', new google.maps.Size(20,34), new google.maps.Point(0,0)),
b: new google.maps.MarkerImage('red_markers_A_J2.png', new google.maps.Size(20,34), new google.maps.Point(0,34)),
c: …
}
var marker = new google.maps.Marker({
position: myPosition,
map: myMap,
icon: markerImages.a
});
Having an odd problem printing an API-generated (V3) Google Map from Internet Explorer 7 & 8.
I generate my map with JavaScript similar to the following:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var centroid = new google.maps.LatLng(35.9948166667, -83.9781791667);
var myOptions = {
disableDefaultUI: true,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centroid
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker0 = new google.maps.Marker({
position: new google.maps.LatLng(36.1102, -83.9208),
map: map
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(36.001, -83.8646),
map: map
});
}
</script>
Typically there are about 25-35 markers on any of my maps. These print just great from Safari, Firefox, and Chrome, on both OS X & Windows XP. But, as soon as I try to print from Internet Explorer 7 or 8, the maps go all crazy: they overflow their boundaries that I set in the print CSS and the markers disappear from the map, leaving just a blank spot on the map.
Anyone encountered this/know how to proceed?
TIA.
IIRC, you'll have to use the Google Static Maps API if you want printer friendly maps.
It should be pretty easy to build the Static Maps API URL request string from the LatLng or your markers. One caveat is that the URL is limited to 2048 characters including any character escapes, this will limit how many markers you can have on the map at one time.
[Edit] In the Javascript API, markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.