Databases
StackOverflow2013
Postsdbo
POExtract drawingManager polygon path Google Maps on click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtract drawingManager polygon path Google Maps on click
    primarykey
    data
    text
    <p>I have a Google map with drawing manager enabled where a user can draw a polygon and save it to my db. I added an event listener to the drawingManager object for the overlaycomplete event. When the event is fired, the coordinates of the polygon are written to a hidden field. This works great - the only problem being that if the individual vertices are dragged/changed after that point the event isn't fired. I need to either update the field on(any)change or iterate through the polygon vertices when the user hits submit and write them to the hidden field. I can't quite figure out how to get this to work, but you can see what I have so far here: <a href="http://jsfiddle.net/5Y4WT/21/" rel="noreferrer">http://jsfiddle.net/5Y4WT/21/</a></p> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="map_canvas" style="width:500px; height:450px;"&gt;&lt;/div&gt; &lt;form method="post" accept-charset="utf-8" id="map_form"&gt; &lt;input type="text" name="vertices" value="" id="vertices" /&gt; &lt;input type="button" name="save" value="Save!" id="save" /&gt; &lt;/form&gt; </code></pre> <p><strong>JavaScript:</strong></p> <pre><code>var map; // Global declaration of the map var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow var lat_longs = new Array(); var markers = new Array(); var drawingManager; function initialize() { var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096); var myOptions = { zoom: 13, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 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.POLYGON] }, polygonOptions: { editable: true } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) { var newShape = event.overlay; newShape.type = event.type; }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { $('#vertices').val(event.overlay.getPath().getArray()); }); } initialize(); $(function(){ $('#save').click(function(){ //iterate polygon vertices? }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USYev
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POExtract drawingManager polygon path Google Maps on click
      1. USuser2915001
      1. VTFavorite
    2. VO
      singulars
      1. POExtract drawingManager polygon path Google Maps on click
      1. USKubaKubikula
      1. VTFavorite
    1. COHave you seen [this example](http://www.geocodezip.com/blitz-gmap-editor/test5.html) which uses the DrawingManager and exports polygon paths. Based off the [Blitz Map Editor](http://code.google.com/p/blitz-gmap-editor/) project.
      singulars
      1. POExtract drawingManager polygon path Google Maps on click
      1. USgeocodezip
    2. CO@geocodezip thank you! I was able to extract the bit I needed and it works great!
      singulars
      1. POExtract drawingManager polygon path Google Maps on click
      1. USYev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload