Круг не отображается в GMAP

Question

Вот мой код:

function initMap() { 

    var myLatLng = {lat: {{userInfo.lat}}, lng: {{userInfo.lng}} }; 

    var map = new google.maps.Map(document.getElementById('gmap'), { 
     zoom: 16, 
     center: myLatLng 
    }); 

    // Add circle overlay and bind to marker 
    var circle = new google.maps.Circle(document.getElementById('gmap'), { 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: myLatLng, 
     radius: 100 // 10 miles in metres 
    }); 

} 

console.log(myLatLng); показал, что широта и LNG есть и карта на самом деле масштаб, где я хочу. Однако круг не появляется. Может кто-нибудь мне помочь?

Answer 1

Вы передаете два параметра конструктору Circle; ваши варианты круга, а также document.getElementById('gmap'), что не требуется. Это используется только для конструктора Map. См https://developers.google.com/maps/documentation/javascript/reference#Circle

Вам просто нужно сделать:

var circle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: myLatLng, 
     radius: 100 // 10 miles in metres 
    }); 

фрагмент кода:

function initMap() { 
 

 
    var myLatLng = {lat: 42, lng:-72}; 
 

 
    var map = new google.maps.Map(document.getElementById('gmap'), { 
 
    zoom: 16, 
 
    center: myLatLng 
 
    }); 
 

 
    // Add circle overlay and bind to marker 
 
    var circle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    map: map, 
 
    center: myLatLng, 
 
    radius: 100 // 100 metres 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body, 
 
#gmap { 
 
    height: 100%; 
 
    width: 100%; 
 
}

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