Это поможет Вам?
были некоторые способности к Drawing on the Map
https://developers.google.com/maps/documentation/javascript/overlays
, Возможно, это действие поможет Вам
существует раздел Custom Overlays
https://developers.google.com/maps/documentation/javascript/customoverlays
, Который использует OverlayView
примеры, которые можно найти здесь https://developers.google.com/maps/documentation/javascript/customoverlays
кроме того, существует второй способ, которым можно попробовать Simple Polylines
https://, developers.google.com/maps/documentation/javascript/examples/polyline-simple
Здесь является частью примера
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: 'terrain'
});
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
// You need to have a polyline,
var poly = new google.maps.Polyline({
map: _map,
strokeColor: '#000',
strokeWeight: 2,
strokeOpacity: 0.8,
clickable: false
});
// Then you have to add a listener, This will add points to polyline as you drag cursor
var move = google.maps.event.addListener(_map, 'mousemove', function (e) {
poly.getPath().push(e.latLng);
});
// on mouseup add this,
google.maps.event.addListenerOnce(_map, 'mouseup', function (e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
var polygon = new google.maps.Polygon({
map: _map,
path: path,
strokeColor: '#000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#000',
fillOpacity: 0
});
});
/*
Note:
During dragging, you must temporarily make the map non draggable. This can be done
by setting draggable as false
*/