I'm working on a map where I display markers with a custom image.
The images are displayed correctly, but for some reason when opening the site in IE8 the images aren't resized accordingly.
My images are 64x64px and I want them to be 24x24px.
This is the code I'm using:
var icon = new google.maps.MarkerImage(iconUrl);
icon.size = new google.maps.Size(24,24);
icon.scaledSize = new google.maps.Size(24,24);
var marker = new google.maps.Marker({ position: position, title: title, icon: icon });
marker.setMap(mb.map.mapObject);
It works perfectly on Chrome, but IE8 simply ignores the scaledSize property.
I've also tried using the constructor, but I get the same results.
Has anyone seen this problem before? is it a known bug? what can I do besides hacking the CSS and setting the size there.
Thanks!
EDIT: I just tested it on IE9 and it works with no problems.
I realized the same problem today when using IE8. MarkerImages are not scaled anymore... I have already sent a bug report to Google.
Possible Workaround: Try to use an older version of Google Maps (not the current version 3.7). Here is the code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&sensor=false"></script>
Please file a bug over on our issue tracker:
http://code.google.com/p/gmaps-api-issues
Also, please post a reply to this answer once you do file it, so I can track the bug.
I ran across this today in Chrome for Mac too. Going back to 3.6 fixed it for now. This is definitely a bug. I submitted it to google too.
Related
This morning (2/16/23) I woke up and saw that Chrome had been updated. I went to my site, which uses SVG format for the favicon, and they are now all appearing as black dot?
The code has not been changed, and has worked for years..so I have to assume the updated Chrome either introduced a bug with svg icons or Chrome has dropped support?
Is anyone else seeing this issue?
I should note that I use the following syntax to change the favicon.
const favico = document.getElementById('favicon');
const svgpath = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4NCiAgPGcgaWQ9IkZhdmljb25fd2l0aF9iYWNrZ3JvdW5kXzIiIGRhdGEtbmFtZT0iRmF2aWNvbiB3aXRoIGJhY2tncm91bmQgMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ0LjUgLTE1NCkiPg0KICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMTQ4NSIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMTQ4NSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NC41IDE1NCkiIGZpbGw9Im5vbmUiLz4NCiAgICA8ZyBpZD0iRmF2aWNvbl9Mb2dvIiBkYXRhLW5hbWU9IkZhdmljb24gTG9nbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYgMTU0KSI+DQogICAgICA8cGF0aCBpZD0iUGF0aF8xMzI1NiIgZGF0YS1uYW1lPSJQYXRoIDEzMjU2IiBkPSJNNzYuMjE1LDE2My42NzJ2MTMuMTE2YS4zMTMuMzEzLDAsMCwxLS4zMTIuMzEySDU3LjM5MmEuMzExLjMxMSwwLDAsMC0uMzEyLjMxMnYzLjkzMmEuMzEyLjMxMiwwLDAsMCwuMzEyLjMxMmgyMy4zYS4zMTIuMzEyLDAsMCwwLC4zMTItLjMxMlYxNjMuNjcyYS4zMTIuMzEyLDAsMCwwLS4zMTItLjMxMkg3Ni41MjdhLjMxMi4zMTIsMCwwLDAtLjMxMi4zMTJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTIuMjkyIC0xNDkuNjU2KSIgZmlsbD0iI2VlMjc2MSIvPg0KICAgICAgPHBhdGggaWQ9IlBhdGhfMTMyNTciIGRhdGEtbmFtZT0iUGF0aCAxMzI1NyIgZD0iTTEyMy4zOTQsNTkuMDk0aC04LjkzMWEuMzE0LjMxNCwwLDAsMC0uMzE0LjMxNFY3Mi40ODZhLjMxMy4zMTMsMCwwLDAsLjMxNC4zMTRoOC45MzFhLjMxMy4zMTMsMCwwLDAsLjMxMy0uMzE0di0zLjkzYS4zMTMuMzEzLDAsMCwwLS4zMTMtLjMxNGgtNC4xNjFhLjMxNS4zMTUsMCwwLDEtLjMxNC0uMzE0VjYzLjk2NGEuMzE0LjMxNCwwLDAsMSwuMzE0LS4zMTRoOC45NDhhLjMxMy4zMTMsMCwwLDAsLjMxNC0uMzE0di04LjVhLjMxNC4zMTQsMCwwLDAtLjMxNC0uMzE0aC00LjE2MWEuMzE1LjMxNSwwLDAsMC0uMzE0LjMxNHYzLjk0N0EuMzE0LjMxNCwwLDAsMSwxMjMuMzk0LDU5LjA5NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQuNTc0IC00OS45NDYpIiBmaWxsPSIjMTIwMjMzIi8+DQogICAgICA8cGF0aCBpZD0iUGF0aF8xMzI1OCIgZGF0YS1uYW1lPSJQYXRoIDEzMjU4IiBkPSJNMTkuMTMzLDQuMjY1Vi4zMDlBLjMwOS4zMDksMCwwLDAsMTguODI1LDBILjMwOUEuMzA5LjMwOSwwLDAsMCwwLC4zMDlWMjcuMTM1YS4zMDkuMzA5LDAsMCwwLC4zMDkuMzA5SDQuNDhhLjMwOS4zMDksMCwwLDAsLjMwOS0uMzA5VjQuODgzYS4zMDkuMzA5LDAsMCwxLC4zMDktLjMxSDE4LjgyNWEuMzA4LjMwOCwwLDAsMCwuMzA5LS4zMDlaIiBmaWxsPSIjYWMyMDdkIi8+DQogICAgPC9nPg0KICA8L2c+DQo8L3N2Zz4NCg==`;
favico.href = svgpath;
EDIT: The symptoms of this problem are inconsistent. Today I tried this again and suddenly it works... sometimes. If I refresh over and over it works about half of the time. If it runs inside an iframe the iframe requires both allow-same-origin and allow-scripts. I can't really be sure about any of this though because it is so inconsistent. Ultimately I decided to go with IP based geolocation simply to avoid the headache.
If anyone can replicate this problem, let me know in the comments.
TLDR: This link will display an error in safari and ie11, but not chrome.
The code in question:
<!DOCTYPE html>
<html>
<head>
<script>
navigator.geolocation.getCurrentPosition(function(position){
document.body.innerHTML = position.coords.latitude;
}, function(error){
document.body.innerHTML = error.message;
});
</script>
</head>
<body>
</body>
</html>
The problem: On chrome, edge beta (so basically chrome) and chrome on android, this code will succeed and print your devices latitude to the page.
On Safari, safari for ios, and IE11, this will fail with the message "This site does not have permission to use the Geolocation API."
I assume it's not referring to the user granting permission to access location data, but i checked this anyway. Doesn't appear to be the case because it's working in one browser but not another on the same device. In my example, it works in chrome but not ie11 on the same windows 10 computer. I also had a coworker confirm the same thing, it works in chrome but not safari on his mac.
That leaves me thinking it's a domain issue, but why would it work in one browser and not another? After tons of Googling the best answer I can find is that it is an SSL issue, but if you go to https://developers.google.com/maps/documentation/javascript/geolocation you can see that even google.com is facing the same issue. So I think that rules that out. you can even try it on w3schools own site https://www.w3schools.com/html/html5_geolocation.asp
Google of course has no input here because navigator is a product of html5
I can't reproduce the issue in IE 11. I tested the Google and w3schools links in IE 11 and they asked for permissions to get location and can show the location if I permitted. I also tried the code snippet you providing and it output the position in both IE 11 and Chrome.
Have you unchecked the "Never allow websites to request your physical location" box in IE 11? Besides, I also found a similar thread and you could also refer to the solution in it.
And in your post, it seems that you have found a solution. I suggest that you could also put your solution as an answer and take the best answer as an accepted answer. It can help other community members in future in similar kind of issues.
I am trying to turn off main lines (grid map) in google maps api for web, but I do not know how to do. I was trying to set borders to 0, but it still display on map.
Thank you in advance for help.
I think this is a bug with the latest version of Chrome. It happens on my site http://www.shortwave.am as well but only on the newest Chrome version and not Chrome 33.0.1750.154 or Firefox.
I am converting my old code from v2 to v3 and noticed that the map is now significantly slower when I drag it. This only happens with Firefox while there is no issue under Google Chrome. This is not caused by my code as this problem exists even in the simplest maps, such as Google's basic example.
Interestingly enough, there is no performance issue under any browser when I visit maps.google.com. The only difference with the basic example seems to be that in the basic example, new tiles appear with a fade in transition effect. Because of that, I suspect that the fade in effect is the culprit. Does anybody know if I can disable it somehow? Are there any other ideas?
Note: I have tested this with the latest versions of Firefox & Chrome under Windows & Linux, on different computers and different API versions v3.exp, v3.13. Code is available at Google's basic example, but follows an even simpler working copy of it.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas { height: 100%; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'),
{zoom: 8, center: new google.maps.LatLng(-34.397, 150.644)});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Update:
I never had to take screencasts before so I probably didn't used the best tools, anyway even with these pixelated videos the difference should be obvious. In Firefox the render of new tiles and the panning is laggy (this is not the case when using maps.google.com so it's not an issue of Chrome being "better" than Firefox).
Chrome: http://tinypic.com/r/zwepsp/5
Firefox: http://tinypic.com/r/263wytt/5
I can not believe somebody else is having this problem that i am STILL trying to figure out for more than TWO years.
You have no idea how many times i posted this issue and almost all the time got some suggestions that had nothing to do with the question.
Even i emailed some idiots working at google who told me that it is probably a bug and i should post it at some forum bla-bla-bla.
When i did post it there i explained them the problem in deep details and got some answer that still has nothing to do with my question.
What i noticed is that if i remove the video card drivers it works like charm and everything is very smooth. It is the same when i connect throught remote desktop.
I will be happy if somebody finds a solution.
P.S. On mac OS it is a little better than Windows!
This is my original question
Here you can see the responses on google forum: Click
You can try this Google help: https://support.google.com/maps/answer/18529?hl=en. Maybe it has something to do with the hardware acceleration. But If the map is loading slow doesn't it show a message to the user?
If you want a work-around, try caching the map tiles of the places you most often look at (ie. your home town's greater area)
Not sure if this is against google's terms of use though, as you technically are downloading their IP without permission. If it is, you can use something like:
https://code.google.com/p/ogmaps/
or
https://code.google.com/p/gmapoffline/ which are third party interpretations of google's maps and royalty free.
I have an application using Bing Maps that draws polygons on a map. For most polygons, the system works fine, and shows the shape correct. However, with huge polygons (covering almost the entire planet), I get errors in IE7 and IE8. The errors are related to a setSize method within the map script (veapicore.js). The map works correctly in IE9 and FF (still working on Chrome). The page is [http://data.nbr.org/Mapping/chinamissilerange]. The first two checkboxes work fine, the third is where the problem is (803 Brigade Base 55).
I can't figure out what could be causing the problem. Does anyone know what this issue could be?
Thanks,
Erick
I have solved this question. It turns out that IE7 and IE8 have issues with this particular API when everything isn't finished loading. Moving the map javascript to $(window).load fixed the issue.