We Keep Coding

Sorry, we have no imagery here - Google Satellite Map

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.

Google Maps Javascript API not working on mobile site

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.

CORS and Google Maps Places Autocomplete API calls [duplicate]

This question already has an answer here:
Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource
(1 answer)
Closed 5 years ago.
I am trying to get Angular talk to Google Maps Places Autocomplete API. The problem is that the server doesn't allow CORS calls (it doesn't return an Access-Control-Allow-Origin header) and JSONP calls also seem to be futile as it returns plain JSON and not JSONP, causing a syntax error.
This is what I am currently trying in a service function (_jsonp is a Jsonp object):
return this._jsonp.request(url, { method: 'GET' });
And this doesn't work. The response arrives, but Angular crashes because it's not JSONP but JSON.
This is crazy. How on earth can I access this if CORS is disabled and JSONP calls don't work?
https://maps.googleapis.com/maps/api/place/autocomplete/json?key=ACCESS_KEY&types=(cities)&input=ber
Is there a way to convert a JSON server response into a JSONP data object in the Observable pipeline?

The supported way to call the Place Autocomplete API from a web app is using the Places library:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
...
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
That way it doesn’t matter that the responses lack the Access-Control-Allow-Origin header.
Using the Maps JavaScript API that way—by way of a script element to load the library, and then using the google.maps.Map and other google.maps.* methods—is the only supported way. Google intentionally does not allow doing it by way of requests sent with XHR or the Fetch API.

How to highlight a user's current location in google maps?

I am using following code to get the location of user in phonegap (it works fine)
function getLocation() {
var win = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_element = document.getElementById("displayMap");
var map = new google.maps.Map(map_element, myOptions);
};
var fail = function(e) {
alert('Error: ' + e);
};
var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}
This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.
Are there any available options that can be used to highlight the position or is there a workaround?
EDIT
Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?

You can use the newly released GeolocationMarker which is part of the Google Maps API Utility Library.
It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptions method and specifying an icon property.

Use icon inside marker like
var Marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: "",
icon: /bluedot.png
});
you can use this google map location indication circular blue dot icon similar to the google map

You can use MarkerOptions to set a custom image. Check the Google Maps Javascript API V3 Reference to more details about Google Maps.

problem with google directions api

A user comes to my web app and locates the destination address but he does not locate the source location and publishes the page. The normal user who are not registered to the web app adds the source location.
Once the user adds the source location he is not able to see the exact direction map, rather the google is displaying the default maps.
Here is the exception giving when we used chrome console.
I have added the code here and also the exception I am getting
Error Name:
main.js:41Uncaught TypeError:Object#<object> has no method 'Load'
function calcRoute() {
showDirections();
document.getElementById('directionsPanel').innerHTML="";
initialize();
var start = document.getElementById("txt_from").value;
var end = getDestinationAdderss(document.getElementById('final_address').innerHTML);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas_directions"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

You have removed some code that is present in the Google sample.
directionsDisplay = new google.maps.DirectionsRenderer({
'map': map,
'preserveViewport': true,
'draggable': true
});
I expect that your code is working again if you add the code above in the proper place. If not, you really should start with the sample code again, since that does work.

The debug screenshot indicates that initialize() is the last bit of code run in your file before Google Maps API throws the error. So look in there (and/or provide that code in your question).
UPDATE: Based on your code, the first to check might be to make sure that there is an element with an id of map_canvas_directions and another one with an id of directionsPanel. There's not enough information to say for sure, but if I had to guess, your UI changes got rid of one or the other of those elements, but your code requires them.
UPDATE TO THE UPDATE: Replacing the stuff in the DirectionsRenderer() constructor as #Arjan suggests is also a likely cause of your problem so definitely try that too!