I am trying to use google maps to allow a user to create multiple editabled/draggable polygons. Everything works fine from a desktop browser, but on a mobile/touch device all polygons are no longer draggable once a user adds a new polygon to the map. Polygons loaded on the map during initialize are draggable as expected.
I know touch events are not really supported by the google maps api, but is there a workaround I can do?
Simplified example:
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: {lat: 24.886, lng: -70.268}, mapTypeId: 'terrain' }); var triangleCoords = [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190} ]; // Construct the polygon. var bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, draggable: true }); bermudaTriangle.setMap(map); var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['polygon'] }, polygonOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, draggable: true, zIndex: 10000 } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) { drawingManager.setOptions({ drawingMode: null }); }); } google.maps.event.addDomListener(window, 'load', initMap); https://codepen.io/cyberjus/pen/XEVoer
Upon load from a mobile device, the first polygon is draggable, but once another polygon is drawn, neither can be dragged anymore. I am testing on an actual iPad, so I dont know if it is IOS specific or not.
0 comments:
Post a Comment