Google Maps JavaScript API is no longer supported in IE9. When I open my map in IE9 it shows a map without markers and a popup informing about support.
I don't need a map without markers. How can I disable it (at least - display: none) for such browsers?
There was GBrowserIsCompatible(), but it has been removed from v3...
Just a workaround:
Check via querySelector if the map contains the bar with the message:
google.maps.event.addListenerOnce(map,'idle',function(){
if(this.getDiv().querySelector('.infomsg a[href="https://whatbrowser.org"]')){
this.getDiv().parentNode.removeChild(this.getDiv());
}
});
I removed the info message, just by using the single CSS line.
.infomsg {display:none;}
Related
Google Maps Platform API has been working fine for months, but now when the standard JavaScript file is invoked with my API Key:
<script src="https://maps.googleapis.com/maps/api/js?key=...">
</script>
It produces popup error message:
Script Error
https://maps.googleapis.com/maps-api-v3/api/js/35/3/intl/en_gb/map.js
Other people I know are experiencing the same error.
The error arises in Internet Explorer but in Firefox the Map is simply not displayed.
Has anyone else experienced this or have any answers?
After some diagnostic investigation I found the problem is associated with the Map class as used in:
map = new google.maps.Map(document.getElementById('map'),{...});
My earlier scripts used a variable Map on the left instead of map and worked OK until recently:
Map = new google.maps.Map(document.getElementById('map'),{...});
Now it seems to conflict with the Map class, but by using the variable Pane instead it is working again:
Pane = new google.maps.Map(document.getElementById('map'),{...});
So it seems the variable can be anything except Map.
I run a website with a number of custom Google Maps built in (showing various locations on a map after a search or generating directions to/from a location). I use Google Maps Javascript API for this. My users have started reporting that on iOS 10, these maps no longer respond to touch events -- they cannot pinch-to-zoom nor can they click on the "pins" on the map to open the location info balloons.
I've been searching all over for others who have had this issue to no avail. I found one StackOverflow question here (http://webcache.googleusercontent.com/search?q=cache:DaiSdOgD0U4J:stackoverflow.com/questions/39401974/google-maps-javascript-doesnt-pan-or-zoom-in-ios-10+&cd=3&hl=en&ct=clnk&gl=us), but it was downvoted, then deleted. (Why?) A fresh search today still shows that page, but it leads to a 404, making a search even more frustrating.
Has anyone else experienced this? Is this a bug within the Google Maps API? I certainly can't find anything about that on their Developer website. Am I possibly doing something very wrong to lead to this? The code has worked for years and hasn't been modified in a few months now, so nothing changed on our end.
We do use an API key in our requests
I've tried switching from the
current release version (3.25) to the current experimental version
(3.26) with no changes in functionality.
Users report this happens in at least both Safari and Chrome on iOS 10
Just hoping someone can provide any insight at all on the issue.
Ok here is how I did to fix this issue.
As a reminder i'm using AngularJS via the Ionic framework.
I was calling the map this way in my index.html :
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=true"></script>
It seams like signed_in feature of google map is adding a layer on the map that is not letting the map getting the X,Y of your screen touch position.
I just replaced by false to disable the signed_in feature and its working like a charm
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=PUT_YOUR_GOOGLE_API_KEY_HERE&signed_in=false"></script>
I am working on a website that uses Google Maps but I can't get the map to show on Firefox. I am using this basic code to initialize the map.
function initialize()
{
var mapProperties = {
center:new google.maps.LatLng(33.9000,35.5333),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
googleMap = new google.maps.Map(document.getElementById("mapDiv"),mapProperties);
googleMap.addListener('click', function()
{
if(infowindow!=null)
infowindow.close();
});
}
The function initialize is called when the page loads.
In the document head, I am including this script:
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js'></script>
The map works fine in google chrome and internet explorer, but is invisible in firefox. In firefox, the div containing the map ("mapDiv") seems to be initialized with the map content when I inspect the html, but the div is transparent and the map doesn't show.
I have tried clearing the cache and starting firefox without plugins in safe mode but the issue remains. I appreciate any help in advance. Thank you
Thanks to all who replied. The issue has been solved. The problem was that I had my map div inside a table cell but the table cell did not have a height set. After setting a height of 100% to the the table cell, the map shows properly.
Also check if firefox browser privacy tracking is unchecked. This feature in firefox 42 onwards prevents display of maps which otherwise display in chrome and IE. I dont know why map display code should affect tracking in firefox. What worked for me in firefox 48.0 was to disbale tracking. Go to menu - options which opens about:preferences page. In Privacy uncheck tracking. These mindless browser updates developer do not apply their mind.
I was having this problem, map was only appearing in Chrome. I added to src= the tag &sensor=true -- example:
src="http://maps.googleapis.com/maps/api/staticmap?center=Tombouctou,Mali&zoom=12&size=350x350&sensor=true"
Now it appears in both Chrome and Firefox.
I am following this link to create Adsense on GMAP https://developers.google.com/maps/documentation/javascript/examples/ads-adunit
But when i implemented it on my website only ads and some part of MAP only highlighted, I also tried to debug the view from the firebug tool but not found any hidden property or error. The same code i have implemented.
pastebin.com/AbEEExSa
Since it shows grey color in the map-canvas, it seems to be a refresh problem. This can be solved by triggering the resize of the Google maps.
google.maps.event.trigger(map, "resize");
Try adding this line after the completion of adunit API(success callback of this API).
FYI:
resize : Developers should trigger this event on the map when the
div changes size: google.maps.event.trigger(map, 'resize').
Updates:
I tried using the code that you have pasted in codebin, removing the php and parts that you have commented. It is working. I'm not sure what your php code does. So try debugging like in the fiddle.
I have started working on Google maps recently.What I have done till now is to get current location(position) on Google map.It works fine and displays the current position successfully.
But when I place the "!DOCTYPE html" tag in the very first line of my html code, the map is not displayed.
Also, I replaced the "%" in div tags "style" attribute with the "px" (pixels) when I used the "!DOCTYPE html" tag in my document, but it didn't worked.
I am using both Google Chrome (version 21.0.1180.41) and Firefox (version 14.0b12) web browsers to display the map, but it doesn't work for any of them.
What may be the possible reasons? Please answer.
Thanks!