google mapsを使用して単純な線を描くapi js図面

Question

Googleマップjs apiを使用して、単純な線（ポリラインではない）を描く方法はありますか？私はポリラインを使ってこれを行うようにしていますが、ポリラインの描画は終了後にのみ終了しますので、このスタッフを作るための通常の方法は見つかりませんでした。図面では、円やポリラインのような描画を意味します...

Answer 1

<style>#map_canvas {height: 400px;}</style> 
<div id="map_canvas"></div> 
<p>Click on the map to draw lines</p> 

<script> 
var polyLines = []; 
var markers = []; // marker objects 
var map; 

function initMap() { 
    geocoder = new google.maps.Geocoder(); 
    var myCenter = new google.maps.LatLng(50.5, 4.5); 
    var myOptions = { 
    zoom: 6, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: myCenter 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // detect click on the map. 

    var startPoint = null; 
    var endPoint = null; 
    map.addListener('click', function(e) { 
    var lat = e.latLng.lat(); 
    var lng = e.latLng.lng(); 
    var position = {lat: lat, lng: lng}; 
    if(! startPoint) { 
     startPoint = position; 
    } 
    else if(! endPoint) { 
     endPoint = position; 
     // so now we draw a line 
     var polyLine = makePolyline([startPoint, endPoint]); 
     polyLines.push(polyLine); 
     // reset the points 
     startPoint = null; 
     endPoint = null; 
    } 
    }); 
} 

// return a polyline. If you give 2 points, it will simply be a line 
function makePolyline(points) { 
    return new google.maps.Polyline({ 
    path: points, 
    // geodesic: true,  // this makes the line curvy 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2, 
    map: map 
    }); 
} 

</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=geometry"></script>