When displaying a Google Map with Maps JavaScript API v3 activated, the default "Map" view works well, but the "Satellite" view does not : The image tiles read "Sorry, we have no imagery here".
I have two versions of the map : The public version works well either in Map mode or Satellite mode.
The private version, that requires login and allows for editing the custom stuff loaded onto the map, is the one that says "no imagery here" but only in Satellite mode.
When in private mode for editing, here is an example of working Map view :
Here is an example of broken Satellite view :
When looking at the Javascript console, here is what I find :
GET https://khms1.googleapis.com/kh => Error 400 Bad Request
But the request is sent by Google's own js code.
My web app has been working fine for years until I noticed this.
In case you are using a prototype js library, check in your developer console if you are receiving an error from Array.from function, if so, fix this bug in the overrided function or just comment it (at least to test it).
I had the same issue. I tried every available solution on the internet. Turns out Google tag manager was the culprit. How did I come to this conclusion? I opened the network tab in chrome and blocked all the js files from loading. I enabled them one by one and checked if satellite view was loading. For me Google tag manager js file was causing the issue.
Related
I have built and deployed a next.js app that displays a map with the help of #react-google-maps/api . Furthermore, I'm using the Google maps "data driven" API to create a feature layer that displays postal code boundaries.
I've deployed this to Vercel and it works well on some browsers.
But, the problem I'm having is that the "feature layer" is not displayed on some browsers.
On browsers on which the "feature layer" is not displayed, the following error is being printed to the console
google.maps.FeatureLayer.style: The map is not a vector map. That will prevent use of data-driven styling.
and in full below:
key=***************&v=beta®ion=US&map_ids=81e0340ff65abdde&callback=initMap:343 google.maps.FeatureLayer.style: The map is not a vector map. That will prevent use of data-driven styling.
I've checked the status of my map on the google cloud console and my map is shown as
Name Map ID Type
Zipcode Map 81e0340ff65abdde JavaScript – Vector
The map seems to be a js vector map but still gives this error.
I don't know what else to try and there seems to be little information on this topic. Any help is greatly appreciated.
I am using Google maps in an Ionic application (which connects to NodeJS/Express) for ipad.
In the app, I am displaying markers for the addresses provided by the user. My use case is such that users need to view the google map with markers when they are offline. These are primarily field users who do not have access to internet when on the field.
The approach I was thinking was to have users launch the google maps with markers set, in the ionic app (when they are connected to the internet) and provide a save button. Once they click on the save button, we somehow save an image/screenshot of the maps view on the device.
When the user opens the map while offline we load this image instead.
What would be the best way to save the image of the map shown in a Ionic app? Is there another approach which I should be looking at?
Thanks.
option 1: I think here you can use Google Static Maps api which returns image files you can call this api when user clicks on save button (obviously when you have internet connection), and cache the image locally. Just go through the Google Static Maps api
option 2: I don't prefer this but worst case if nothing works for you just take a screen shot of the user's screen and save that image. Here is the cordova plugin to take screenshots cordova-screenshot
Happy coding :)
I want to create a GAS standalone web app that will have a google map embedded. Visitors will see their location, drag around and will be able to pin details that can be seen by other users. User clicks on a point, a custom form pops, they fill and submit for admin approval. Can we make it happen?
Unfortunately, now it is impossible to implement an application required by you neither using the Ui nor Html Services. The Ui Service can produce only static map bitmaps without ability to drag/scroll, zoom, markers selection, etc. And the Html Service cannot correctly handle the Google Maps Javascript API because the Caja sanitizer, at least, complains once trying to compile any Maps API Sample by outputting the FATAL_ERROR js?sensor=false:13+3 - 15+4: Properties cannot end in "__": Rule "setBadSuffix",... message. There is a proper feature request on the Issue Tracker. Please star it to promote this topic to the developers.
Maps support is planned for HTML service. Stay tuned.
This is still not supported. Same error is returned for html service. The issue occurs as soon as you try to include the Maps API with:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
I have created a webpage http://babysoftblog.co.cc/shahma/kmz/map_sexten.html in html5 with offline cache.its showing google map using a kmz file.the page is working fine online..but its not showing google map when page is o[en offline.
Am i doing any mistake?
Google Maps can't be used offline like that. Google Maps is much more than just the initial Lib, for example images, location data etc. If your website doesn't require all the navigation feature, I recommend check out Static Map API.
Initially you include the static map, which is just image file that can be cached offline, then check for connectivity status and load the dynamic map later (aka Progressive Enhancement).
I am using Google Maps JavaScript API v3 with a KML layer to display a map with custom markers.
My map links to the KML file I published as a Google Site attachment. Once loaded, the map shows each of the PlaceMarks from the KML file correctly, but will not display the popup balloons.
Rarely when I click a pin it shows the balloon (5% of the time), then none of the other pins work. When I zoom in and out my custom pin images sporadically revert to the default pin image.
I added the layerOptions to explicitly set clickable to true and suppressInfoWindows to false. It didn't change the balloon behavior.
I have tested with Chrome v19, Firefox v12, and IE8.
Update 1:
I found a typo in my KML, (bal*l*oon). Still not working right. Something is making the pins buggy.
Update 2:
v3 is now working. Google's caching made this difficult to test. Added '?nocache=0' to KML URL to prevent caching. BaloonStyle was the problem, but caching caused the typo to remain. Migrating KML to personal server.
Live HTML Map Page (Fixed)
Live KML Download (Fixed)
My references:
http://developers.google.com/maps/documentation/javascript/reference
http://ge.images.alaska.edu/workshop/advanced.htm
Google is caching your KML on purpose. The workaround is to append something like the current time to the end of your URL so that it is different every time:
var kmlFile = 'http://www.myserver.com/my.kml?'+(new Date()).getTime();
var kmlLayer = new google.maps.KmlLayer(kmlFile);
kmlLayer.setMap(myMap);
My problems:
A typo in my BalloonStyle tag
A stale cache of my KML file
This would have been easier if:
Google Maps JS threw errors when parsing KML
Google caching was reasonably fast
I started testing on a server
Update:
I moved the KML file to my server, but the cache remained stale after the first change. It seems the caching occurs when my Google Map object loads the KML overlay. I made sure it was not my system or my server caching.
The pins start acting buggy if I make a change to my KML and the cache doesn't update. All my pins show in the correct location, but one of the pins won't have a balloon. Changed the file name, works fine!
Update 2:
I reported this caching behavior as a bug on Google Maps JS API.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=4196
Conclusion:
I wrote the ASP.NET/C# class to geocode addresses and build the KML doc in less time than it took to find this error.
Stop caching so hard Google!
Your KML is invalid. <Name> is not part of the spec. Change it to <name> and you should be good to go.