Google Maps grid lines appearing over custom markers on Safari - javascript

This is only happening for me on Safari (v7.1.7). My custom markers have what appears to be white map gridlines appearing. I don't know if this is a problem with my code, a problem with Safari, or a problem with Google Maps.
EDITED TO ADD
Link to page affected: http://momentumdevelopments.ca/2015new-preview/projects/bpr-lofts/
I think this might be a js conflict somewhere on the page, as I can't get the same thing to happen on a JS Fiddle.

I know this is an old question, but adding "optimized: false" to marker config fixed this issue in safari for me:
marker = new google.maps.Marker({
position: LatLng,
map: map,
optimized: false
});
Also found this solution here: Google Maps - Strange vertical and horizontal lines at certain zoom levels in Safari

This behaviour may be a result of a custom browser-zoom, so check if the browser-zoom is set to default

Related

Google maps overlapping marker spiderfier ALWAYS keep spiderfied

Overlapping markers are unspiderfied when I click the map even though I have {keepSpiderfied: true}, how can I always keep all markers spiderfied?
Hitbox on my custom markers are also buggy when I have more than 2 markers overlapping, any solution to this would be insanely helpful.
Thx!
The sole purpose of keepSpiderfied is to avoid unspiderfying when you click on a marker.
Clicking on the map will call unspiderfy regardless of that setting, and so does changing zoom or mapType.
So I guess your only choice here is to fork the repo, or just download the library and add it to version control making your own modifications.

Shadow not showing google maps marker

Having a problem, I'm trying to add a custom shadow but somehow it is not showing. I checked for bugs using firebug but nothing wrong, the path is also correct. I have no idea why it's not working. code below.
var marker = new google.maps.Marker({
map: map,
position: latlngset,
shadow: 'codes/icon/shadow.png',
icon: baseicon+icon
});
With the release of v3.14 as the experimental version, any maps not specifying a version number, will get the new visual refresh behavior, which includes no shadows.
Changes in the visual refresh
All shadows have been removed in the visual refresh. Any shadows specified programmatically will be ignored.

Moved marker disappears when using Marker Clusterer

I have an application that has a large number of markers (hence the desire to use Marker Clusterer), but I want to allow the user to move the marker around. Unfortunately, the marker disappears after it has been moved and you zoom out / in. Precisely, these are the steps that reproduce the problem:
Create all the markers / add them to a marker clusterer object.
Zoom in to see an individual marker.
Move the marker to a new location.
Zoom out until the clustering kicks in (and groups the moved marker with at least one other marker)
Zoom back in to see the marker that was moved.
I would expect the marker to still be there after zooming back in, but it is not. After step 3, the marker remains visible -- it only disappears after zooming out and then back in. The clustering still counts the marker correctly (it appears in the cluster total when zoomed out), but the marker doesn't ever appear again.
I have tried using the latest versions of MarkerClusterer and MarkerClustererPlus and I'm dealing with v3 of the maps API. Additionally, I have an event listener that calls repaint on the cluster after a marker dragend occurs (thinking that a repaint would cause the marker to be placed proper).
[Edit]
A minimal example (based on the Marker Clusterer example) that demonstrates the problem can be found here. The only things changed from this example are the lines including the javascript libraries (made absolute links), and adding draggable: true to the marker options. Following the above 5 steps should reproduce the problem.
This is a bug that has been reported to the google maps api team (issue # 167). See here
It is triggered any time by a setMap(map) followed by any sort of marker movement (including animation) followed by a setMap(null). At that point the marker cannot be shown again.

google api v3: disable all effects/animations

How to disable all effects and animations in google api v3? Is there some equivalent of jQuery.fx.off? If google api used some base library like jquery that would be easy... but this is probably not the case. I just want to disable them ALL. For example:
animated zoom
fading layers on layer switching
InfoWindow anchor is animated when InfoWindow is added, also map pan is animated in this case
... etc.
Or, if disabling them all is not possible, how to disable the particular effects listed above?
It is needed for running it in IE6 which is very slow (note that google api v3 seems to work in this browser), also desirable for other IE versions on slower computers.
There's no general "turn everything off" facility. You need to select what you want to turn off and do each individually, if that's actually possible...
You can't disable animated zoom. This is the subject of a long-standing enhancement request which has been marked WontFix.
There's no option to disable layer-switch fade. I don't think there's an enhancement request, either.
Panning for InfoWindows is controlled by the disableAutoPan option for each InfoWindow. You can set that option individually with InfoWindow.setOptions().
IE6 is not a supported browser for Version 3. If it works, it's a bonus.
By happenstance I needed to slightly pan my map to have all the markers show up. Besides fixing that problem, the map stopped animating on the various zooms. The effect is not exactly what one might want (the map goes blank, then the markers zoom to their spots, then the map with its new extents shows up), but it's better for what I need, and maybe it's better for you. Here's the bottom of my function that puts markers on the map:
map.fitBounds(latlngbounds);
//This minimum zoom trick I got from StackOverflow:
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event){
if (this.getZoom() >= 5){
this.setZoom(5)
}
});
map.panBy(1,0);

Keep Google Maps marker in centre of map while dragged?

I'd like to display some crosshairs in the very centre of a Google Map.
Currently I have code like this:
var mapCentre = map.getCenter();
reticleMarker = new google.maps.Marker({
position: mapCentre,
map: map,
icon: reticleImage,
shape: reticleShape,
optimized: false,
zIndex: 5
});
google.maps.event.addListener(map, 'bounds_changed',
function(){reticleMarker.setPosition(map.getCenter());});
Works great on a desktop, but not on mobile. On mobile the crosshairs don't stay in the centre of the map while the user's finger is dragging the map.
Using a drag event listener doesn't work any better.
Could anyone suggest how to deal with this in mobile browsers? (For reference, I'm seeing this problem in an Android browser.)
I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?
I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?
I've used a similar approach to great effect. You can put any HTML you want in the maps container, Google Maps wont mind.

Categories