Googleマップ - ズームのために同じマーカーの複数のインスタンス

Question

こんにちは私は、マーカーが表示されている国が2回表示されるようにユーザーがズームアウトすると、特定の場所にマーカーがあると言うシナリオがあります二度。

マーカーの1つのインスタンスを削除して、一度に1つのバージョンしか表示されないようにすることが可能かどうか疑問に思っていました。

現在、マップapiは、指定された時点で画面上に同じマーカーの2つのインスタンスが存在するため、オーバーレイを配置する場所を特定できないため、オーバーレイのホバー動作を破棄します。

おかげ

Answer 1

それはバグ（あるいは少なくとも意図しない動作）であるかもしれないように思えます。

var SvgMarker2 = new google.maps.Marker({ 
    map: map, 
    icon: { 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', 
     fillColor: "red", 
     fillOpacity: 1, 
     strokeColor: '#000', 
     strokeWeight: 2, 
     scale: 1 
    }, 
    position: new google.maps.LatLng(-30.4419, -72.1419) 
    }); 

proof of concept fiddle

コードスニペット：SVGアイコンと

A google.maps.Markerのみタイルの中央インスタンスに描画される

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 0, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }); 
 
    var SvgMarker = new google.maps.Marker({ 
 
    map: map, 
 
    icon: { 
 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z', 
 
     fillColor: "red", 
 
     fillOpacity: 1, 
 
     strokeColor: '#000', 
 
     strokeWeight: 2, 
 
     scale: 1 
 
    }, 
 
    position: new google.maps.LatLng(-30.4419, -122.1419) 
 
    }); 
 
    var SvgMarker2 = new google.maps.Marker({ 
 
    map: map, 
 
    icon: { 
 
     path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0', 
 
     fillColor: "red", 
 
     fillOpacity: 1, 
 
     strokeColor: '#000', 
 
     strokeWeight: 2, 
 
     scale: 1 
 
    }, 
 
    position: new google.maps.LatLng(-30.4419, -72.1419) 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>