google maps - Fire event after polygon is loaded -
after searching whole day, didn't find answer.
so problem is:
have google map on user can draw. after this, user can save on server. works fine. here drawing code:
var drawingmanager; var selectedshape; var colors = ['#1e90ff', '#ff1493', '#32cd32', '#ff8c00', '#4b0082']; var selectedcolor; var colorbuttons = {}; var all_overlays = []; var coordinates; var polygon; var globalgoogleselectedcolor; var globalgooglepinwidth; var map; coordobj = new object(); function clearselection() { if (selectedshape) { deletealllastshape(); selectedshape.seteditable(false); selectedshape = null; deleteobjectcontent(coordobj); } } function setselection(shape) { clearselection(); selectedshape = shape; shape.seteditable(true); selectcolor(shape.get('fillcolor') || shape.get('strokecolor')); } function deleteallshape() { console.log("deleteallshape"); deleteobjectcontent(coordobj); (var i=0; < all_overlays.length; i++) { all_overlays[i].overlay.setmap(null); } all_overlays = []; } function deletealllastshape() { var mylenth = all_overlays.length; if(mylenth > 1) { all_overlays[0].overlay.setmap(null); all_overlays = _.rest(all_overlays); } } function deleteselectedshape() { if (selectedshape) { selectedshape.setmap(null); deleteobjectcontent(coordobj); } } function selectcolor(color) { selectedcolor = color; globalgoogleselectedcolor = selectedcolor; globalgooglepinwidth = 2; //only database (var = 0; < colors.length; ++i) { var currcolor = colors[i]; colorbuttons[currcolor].style.border = currcolor == color ? '2px solid #789' : '2px solid #fff'; } // retrieves current options drawing manager , replaces // stroke or fill color appropriate. var polylineoptions = drawingmanager.get('polylineoptions'); polylineoptions.strokecolor = color; drawingmanager.set('polylineoptions', polylineoptions); var rectangleoptions = drawingmanager.get('rectangleoptions'); rectangleoptions.fillcolor = color; drawingmanager.set('rectangleoptions', rectangleoptions); var circleoptions = drawingmanager.get('circleoptions'); circleoptions.fillcolor = color; drawingmanager.set('circleoptions', circleoptions); var polygonoptions = drawingmanager.get('polygonoptions'); polygonoptions.fillcolor = color; drawingmanager.set('polygonoptions', polygonoptions); } function setselectedshapecolor(color) { if (selectedshape) { if (selectedshape.type == google.maps.drawing.overlaytype.polyline) { selectedshape.set('strokecolor', color); } else { selectedshape.set('fillcolor', color); } } } function makecolorbutton(color) { var button = document.createelement('span'); button.classname = 'color-button'; button.style.backgroundcolor = color; google.maps.event.adddomlistener(button, 'click', function() { selectcolor(color); setselectedshapecolor(color); }); return button; } function buildcolorpalette() { var colorpalette = document.getelementbyid('color-palette'); (var = 0; < colors.length; ++i) { var currcolor = colors[i]; var colorbutton = makecolorbutton(currcolor); colorpalette.appendchild(colorbutton); colorbuttons[currcolor] = colorbutton; } selectcolor(colors[0]); } function initializeareas() { map = new google.maps.map(document.getelementbyid('mapbaugebietediv'), { zoom: 15, center: new google.maps.latlng(48.758961357888516,8.240861892700195), maptypecontroloptions: { style: google.maps.maptypecontrolstyle.default, maptypeids: [ google.maps.maptypeid.roadmap, google.maps.maptypeid.terrain, google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid ]}, disabledefaultui: false, zoomcontrol: true, scalecontrol: true, maptypecontrol: true, streetviewcontrol: true, rotatecontrol: true }); var polyoptions = { strokeweight: 0, fillopacity: 0.45, editable: true }; // creates drawing manager attached map allows user draw // markers, lines, , shapes. drawingmanager = new google.maps.drawing.drawingmanager( { drawingmode: google.maps.drawing.overlaytype.polygon, drawingcontrol: true, drawingcontroloptions: { position: google.maps.controlposition.top_center, drawingmodes: [ // google.maps.drawing.overlaytype.marker, // google.maps.drawing.overlaytype.circle, google.maps.drawing.overlaytype.polyline, // google.maps.drawing.overlaytype.rectangle, google.maps.drawing.overlaytype.polygon ] }, markeroptions: { draggable: true }, polylineoptions: { editable: true }, rectangleoptions: polyoptions, circleoptions: polyoptions, polygonoptions: polyoptions, map: map }); google.maps.event.addlistener(drawingmanager, 'overlaycomplete', function(e) { // push overlay onto array (all_overlays): all_overlays.push(e); deletealllastshape(); if (e.type != google.maps.drawing.overlaytype.marker) { // switch non-drawing mode after drawing shape. drawingmanager.setdrawingmode(null); // add event listener selects newly-drawn shape when user // mouses down on it. var newshape = e.overlay; newshape.type = e.type; google.maps.event.addlistener(newshape, 'click', function() { setselection(newshape); }); setselection(newshape); } }); // clear current selection when drawing mode changed, or when // map clicked. google.maps.event.addlistener(drawingmanager, 'drawingmode_changed', clearselection); google.maps.event.addlistener(map, 'click', clearselection); google.maps.event.adddomlistener(document.getelementbyid('delete-button'), 'click', deleteselectedshape); google.maps.event.adddomlistener(document.getelementbyid('delete-all-button'), 'click', deleteallshape); /////////////////////////////////////// // polylgon /////////////////////////////////////// google.maps.event.addlistener(drawingmanager, 'polygoncomplete', function (polygon) { var shapetype = 'polygon'; google.maps.event.addlistener(polygon.getpath(), 'insert_at', function() { // new point coordinates = (polygon.getpath().getarray()); showobjectcontent(coordinates); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon.getpath(), 'remove_at', function() { // point removed coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon.getpath(), 'set_at', function() { // point moved coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon, 'dragend', function() { // polygon dragged coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); /////////////////////////////////////// // polyline /////////////////////////////////////// google.maps.event.addlistener(drawingmanager, 'polylinecomplete', function (polygon) { var shapetype = 'polyline'; google.maps.event.addlistener(polygon.getpath(), 'insert_at', function() { // new point coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon.getpath(), 'remove_at', function() { // point removed coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon.getpath(), 'set_at', function() { // point moved coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); google.maps.event.addlistener(polygon, 'dragend', function() { // polygon dragged coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); coordinates = (polygon.getpath().getarray()); coordobj = getcoordinatesofpolygon(polygon,shapetype); }); buildcolorpalette(); } google.maps.event.adddomlistener(window, 'load', initializeareas); but big problem is, after reloading lat/lng server , drawing on map, event listener not know new polygon:
function fillbuildingform(getdata) { var coord = getdata['buildings']; // coordinates server if(typeof coord[0] !== 'undefined') { var shapetype = coord[0]['shapetype']; var color = coord[0]['color']; var strokeopacity = coord[0]['opacity']; var strokeweight = coord[0]['linewidth']; var numberofcoord = getobjectsize(coord); var flightplancoordinates = new array(); (var = 0; < numberofcoord; i++) { thiscoord = new object(); thiscoord['lat']=parsefloat(coord[i]['lat']); thiscoord['lng']=parsefloat(coord[i]['lng']); flightplancoordinates.push(thiscoord); }; var bermudatriangle = new google.maps.polygon( { paths: flightplancoordinates, strokecolor: color, strokeopacity: strokeopacity, strokeweight: strokeweight, fillcolor: color, fillopacity: 0.35, // bounds: flightplancoordinates, editable: true, draggable: true }); bermudatriangle.setmap(map); //now drawing @ map } } you can see, until now, works perfectly: 
but user can change polygon , want save new changed polygon on server. listener:
google.maps.event.addlistener(drawingmanager, 'polygoncomplete', function (polygon) does not recognize polygon has been drawn. , therefore listener doesn't recognize when user changes polygon. coordinates not present in all_overlays[i]. listener recognizes when polygon drawn manually, not in way above, when drawn automatically.
the question: how can send automatically drawn polygon coordinates "map" object? alternatively, how can fire event "polygoncomplete", recognize new polygon?
the other idea had: trigger mouse click event @ map coordinates, listener must recognize map has changed. unfortunately didn't work.
has idea how solve issue?
there not many possibilities event "polygon_load _complete" not available. 1 suggestion exploit fact operate on polygon must click it. if need manage situation when polygon loaded server , user change shape/coordinates. can add listener on click every polygon during loading phase ..
for each polygon in loading phase..
var apoly = new google.maps.polygon({ paths:mypaths, ....... }); google.maps.event.addlistener(apoly, 'click', function (event) { console.log('this polygon contain : ' + this.paths + ' coords point '); }); in way can intecept click on polygon manage need
Comments
Post a Comment