infoWindowをサークルに置き換えてユーザーの位置をプロットする方法

Question

infoWindowのgoogleマップの例をHTML5のジオロケーションで使用していて、infoWindowテキストボックスの代わりにユーザーの場所を表示するためにサーキュラーマーカーをマップに追加したい。

私はグーグルではありますが、答えが見つかりませんでした。これは可能ですか？

var map; 
function initMap(){ 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 6 
    }); 
      var infoWindow = new google.maps.Circle({map: map}); 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
      var pos = { 
       lat: position.coords.latitude, 
       lng: position.coords.longitude, 
      }; 

      infoWindow.setCenter(pos); 
      infoWindow.setContent('Location found.'); 
      map.setCenter(pos); 
      }, function() { 
      handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 

     function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
     infoWindow.setPosition(pos); 
     infoWindow.setContent(browserHasGeolocation ? 
           'Error: The Geolocation service failed.' : 
           'Error: Your browser doesn\'t support geolocation.'); 
     } 
} 

Answer 1

google.maps.Circle両方またはいずれかが、コンストラクタで設定することができるが、それは（.setCenterと.setRadius方法を有し、.setPosition方法を持たない。

proof of concept fiddle

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 0, 
 
     lng: 0 
 
    }, 
 
    zoom: 6 
 
    }); 
 
    var circle = new google.maps.Circle({ 
 
    map: map, 
 
    radius: 20000 
 
    }); 
 

 
    // Try HTML5 geolocation. 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude, 
 
     }; 
 

 
     map.setCenter(pos); 
 
     circle.setCenter(pos); 
 
     circle.setRadius(20000); 
 
    }, function() { 
 
     handleLocationError(true, circle, map.getCenter()); 
 
    }); 
 
    } else { 
 
    // Browser doesn't support Geolocation 
 
    handleLocationError(false, circle, map.getCenter()); 
 
    } 
 

 
    function handleLocationError(browserHasGeolocation, circle, pos) { 
 
    circle.setCenter(pos); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

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

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