Google maps zoom controls and markers disappear

I encountered two very strange issues with a google maps that appear to be happening only on Chrome/Mac and Chrome/Windows

If you click on the first pin located in Colorado and try to pan the map moving the mouse to the right you will notice that the zoom controls will start to disappear. I already tried fixing it with max-width:none; so this is not the same bug.

If you click on the right marker located in Skopje you will notice that the marker will disappear at zoom level 20

UPDATE: Both of the bugs are fixed if i disable the Hardware acceleration on the Chrome so i think it's more of a Chrome issue than google maps one.

Here is a jsfiddle link to reproduce the problem http://jsfiddle.net/sokarovski/rx74P/2/

var posSkopje = new google.maps.LatLng(42.007652282715,21.372894287109034);
var posColorado = new google.maps.LatLng(38.960487365723,-104.76946258545001);

google.maps.visualRefresh = false;
var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    maxZoom: 20
});

var markerSkopje = new CustomMarker('img.svg');
markerSkopje.setPosition(posSkopje);
markerSkopje.setMap(map);

var markerColorado = new CustomMarker('img.svg');
markerColorado.setPosition(posColorado);
markerColorado.setMap(map);

var zoomOnClick = function(arg1) {
    map.setCenter(this.getPosition());
    map.setZoom(22);
}

google.maps.event.addListener(markerColorado, 'open', jQuery.proxy(zoomOnClick, markerColorado));
google.maps.event.addListener(markerSkopje, 'open', jQuery.proxy(zoomOnClick, markerSkopje));

---

The post is quite old, but the issue is still there. For others, stumbling upon this; you can do this:

Make a local copy of the Markermanager.js from google and modify this line (Line no. 107)

From:

me.maxZoom_ = opt_opts.maxZoom || 19;

To:

me.maxZoom_ = opt_opts.maxZoom || 21;

---

代码中的一些问题看这个

//=========== > Custom Marker Class
function CustomMarker(opts) {
    this.location_ = null;
    this.div_ = null;
    this.inner_ = null;
    this.opts = {
        image:      null
    }
    this.constructor = function(image) {
        this.inner_ = document.createElement('img');
        jQuery(this.inner_).addClass('thumb').click(jQuery.proxy(this.onPinClick, this));
        if (image) this.setImage(image);
    }
    this.setPosition = function(ll) {
        this.location_  = ll;
    }
    this.getPosition = function() {
        return this.location_;
    }
    this.onAdd = function() {
        var div = document.createElement('div');
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.appendChild(this.inner_);
        this.div_ = div;
        var panes = this.getPanes();
        panes.overlayMouseTarget.appendChild(div);
    }
    this.onPinClick = function(e) {
        google.maps.event.trigger(this, 'open');
    }
    this.draw = function() {
        var overlayProjection = this.getProjection();
        if (overlayProjection) {
            var pixPosition = overlayProjection.fromLatLngToDivPixel(this.location_);
            this.div_.style.left = (pixPosition.x ) + "px";
            this.div_.style.top = (pixPosition.y) + "px";
        }
    }
    this.setImage = function(image) {
        this.inner_.src = image;
    }
    this.constructor.apply(this, arguments);
}
CustomMarker.prototype = new google.maps.OverlayView();
//=========== > Initialization 
var posSkopje = new google.maps.LatLng(42.007652282715,21.372894287109034);
var posColorado = new google.maps.LatLng(38.960487365723,-104.76946258545001);

var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 3,
    mapTypeId: google.maps.ROADMAP,
    maxZoom: 20
});

var markerSkopje = new CustomMarker('http://www.gnhl.ca/images/pushed-pin-hi.png');
markerSkopje.setPosition(posSkopje);
markerSkopje.setMap(map);

var zoomOnClick = function(arg1) {
    map.setCenter(this.getPosition());
    map.setZoom(20);
}

google.maps.event.addListener(markerSkopje, 'open', jQuery.proxy(zoomOnClick, markerSkopje));

链接地址: http://www.djcxy.com/p/81584.html

上一篇: 根据缩放级别显示/隐藏标记

下一篇: Google地图缩放控件和标记消失