GoogleMapsAPIについての質問です。  
タイトルの通り円が重なった部分だけ地図を表示するようにしたいです。

詳しく説明すると地図全体は不透明度1で黒く塗りつぶされていて  
現在地点だけ別の色の円で塗りつぶすのですが現在地点だけ半径50m周辺だけ地図を表示するようにしたいです。  
一応今のJSのコードをおいておきますがあまり参考にならないと思います。

```

    function initialize(){
      var myOptions = {
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
    
      var lat=new Array();
      var lon=new Array();
      var polylines = [] ;
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
        // 精度UPあり
        var position_options = {
            enableHighAccuracy: true
        };
    
        // 現在位置情報を取得
        navigator.geolocation.watchPosition(function(position) {
        lat.push(position.coords.latitude);
        lon.push(position.coords.longitude);
        var BaseCircle;
    
    
            var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(myLatlng);
        var circles = [] ;
        var baselatlng = new google.maps.LatLng( lat[0], lon[0] ) ;
        var basecircleOption = {
          center: baselatlng ,      // 中心の位置座標をLatLngクラスで指定
          radius: 1200000 , // 円の半径(メートル単位)
          map: map ,    // 設置する地図キャンパス
          fillOpacity: 1 ,
        } ;
    
        baseCircles = new google.maps.Circle( basecircleOption ) ;
    
        for(var i=0;i<lat.length;i++){
    
          var latlng = new google.maps.LatLng( lat[i], lon[i] ) ;
          var circleOption = {
              center: latlng ,      // 中心の位置座標をLatLngクラスで指定
              radius: 50 ,  // 円の半径(メートル単位)
              map: map ,
        // 設置する地図キャンパス
          } ;
    
          circles[i] = new google.maps.Circle( circleOption ) ;
        }
            // マーカーの表示
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
        }, null, position_options);
    }
    google.maps.event.addDomListener( window , 'load' , initialize ) ;
    
```

よろしくお願いします
CC BY-SA 3.0
2015-12-25T07:57:28.707
20363
2016-02-11T08:52:38.710
13330
question
javascript google-maps
Google Maps で複数の円を描画した時円が重なった部分だけ地図を表示したい。
Mapのカスタム・オーバーレイに対して、SVGのマスク機能を使って描画させてみました。

```

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>mask test</title>
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map_canvas {
            height: 100%;
          }
        </style>
    </head>
    <body>
    <div id="map_canvas"></div>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
    var svgns = "http://www.w3.org/2000/svg";
    function initialize() {
        var myOptions = {
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
    
        var lat=new Array();
        var lon=new Array();
    
       // 精度UPあり
        var position_options = {
            enableHighAccuracy: true
        };
    
        // 現在位置情報を取得
        navigator.geolocation.watchPosition(function(position) {
            lat.push(position.coords.latitude);
            lon.push(position.coords.longitude);
    
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
            var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(myLatlng);
    
            var overlay = new google.maps.OverlayView(); 
    
            overlay.onAdd = function () {
                var root = document.createElement("div");
                this.getPanes().overlayLayer.appendChild(root);
    
                var svg = document.createElementNS(svgns, "svg");
                var div = map.getDiv();
                var width = div.clientWidth;
                var height = div.clientHeight;
    
                svg.setAttribute("width", width);
                svg.setAttribute("height", height);
    
                var defs = document.createElementNS(svgns, "defs");
                svg.appendChild(defs);
    
                var mask = document.createElementNS(svgns, "mask");
                mask.setAttribute("id", "mask");
                defs.appendChild(mask);
    
                var g = document.createElementNS(svgns, "g");
                g.setAttribute("fill-rule", "evenodd");
                mask.appendChild(g);
    
                var rect = document.createElementNS(svgns, "rect");
                rect.setAttribute("mask", "url(#mask)");
                rect.setAttribute("x", 0);
                rect.setAttribute("y", 0);
                rect.setAttribute("width", width);
                rect.setAttribute("height", height);
                svg.appendChild(rect);
    
                root.appendChild(svg);
    
                overlay.draw = function () {
                    while (g.firstChild) {
                        g.removeChild(g.firstChild);
                    }
    
                    var maskRect = document.createElementNS(svgns, "rect");
                    maskRect.setAttribute("x", 0);
                    maskRect.setAttribute("y", 0);
                    maskRect.setAttribute("width", width);
                    maskRect.setAttribute("height", height);
                    maskRect.setAttribute("fill", "white");
                    g.appendChild(maskRect);
    
                    var projection = this.getProjection();
    
                    for (var i = 0; i < lat.length; i++) {
                        var coordinates = new google.maps.LatLng(lat[i], lon[i]);
                        var pixel = projection.fromLatLngToDivPixel(coordinates);
                        var x = pixel.x;
                        var y = pixel.y;
    
                        var coordinates2 = new google.maps.LatLng(lat[i] + 0.00045, lon[i]);
                        var pixel2 = projection.fromLatLngToDivPixel(coordinates2);
                        var r = y - pixel2.y;
    
                        var circle = document.createElementNS(svgns, "circle");
                        circle.setAttribute("cx", x);
                        circle.setAttribute("cy", y);
                        circle.setAttribute("r", r);
                        circle.setAttribute("fill", "black");
                        g.appendChild(circle);
                    }
                }
    
                overlay.onRemove = function () {
                    this.div_.parentNode.removeChild(this.div_);
                    this.div_ = null;
                }
            }
    
            overlay.setMap(map);
    
            // マーカーの表示
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });
        }, null, position_options);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </body>
    </html>
    
```
CC BY-SA 3.0
2016-01-06T06:21:46.993
20652
2016-01-06T06:21:46.993
13314
20363
answer