2011/11/7 - New Release (3.7) - editable shapes, DrawingManager, and more

2,558 views
Skip to first unread message

Chris Broadfoot (Google Employee)

unread,
Nov 15, 2011, 9:47:08 PM11/15/11
to google-map...@googlegroups.com
Hi all,

We recently released a new minor version of the Maps API. This means
that shortly, the versions of the Maps API will be:
3.7: Development/Nightly
3.8: Feature Stable
3.5: Frozen
3.4 will continue to exist for a short period of time, after which you
will receive 3.5 when requesting 3.4 or below.

-----

In this release, we've added:
* Editable shapes (polygons, polylines, circles, rectangles)
* DrawingManager for adding new overlays
* New visual style of default controls
* PlaceResult fields: website and international_phone_number
* ElevationResult field: resolution

See the blog post for details about the new drawing and editing functionality:
http://googlegeodevelopers.blogspot.com/2011/11/make-your-map-interactive-with-shape.html

... and documentation:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#editable

-----

As noted previously, we recommend production applications specify a
minor version (e.g. 3.5, 3.6). Though, please take the time to test
your application against the nightly version (3.7) so that we can
rectify any issues that may surface during your testing. Please post
bugs to the issue tracker and/or post to the developer forum:
http://code.google.com/p/gmaps-api-issues
http://groups.google.com/group/google-maps-js-api-v3

To see more information about versioning of the Maps API, see documentation:
http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning

The full changelog for the Maps API can be found here:
http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

Thanks,
Chris

Gary Little

unread,
Nov 16, 2011, 2:07:55 AM11/16/11
to Google Maps JavaScript API v3
Could you post the CSS styles for the new visual style of the default
controls so that I can make my own visual controls look similar?

On Nov 15, 6:47 pm, "Chris Broadfoot (Google Employee)"
<c...@google.com> wrote:
> Hi all,
>
> We recently released a new minor version of the Maps API. This means
> that shortly, the versions of the Maps API will be:
> 3.7: Development/Nightly
> 3.8: Feature Stable
> 3.5: Frozen
> 3.4 will continue to exist for a short period of time, after which you
> will receive 3.5 when requesting 3.4 or below.
>
> -----
>
> In this release, we've added:
>  * Editable shapes (polygons, polylines, circles, rectangles)
>  * DrawingManager for adding new overlays
>  * New visual style of default controls
>  * PlaceResult fields: website and international_phone_number
>  * ElevationResult field: resolution
>
> See the blog post for details about the new drawing and editing functionality:http://googlegeodevelopers.blogspot.com/2011/11/make-your-map-interac...
>
> ... and documentation:http://code.google.com/apis/maps/documentation/javascript/overlays.ht...
>
> -----
>
> As noted previously, we recommend production applications specify a
> minor version (e.g. 3.5, 3.6). Though, please take the time to test
> your application against the nightly version (3.7) so that we can
> rectify any issues that may surface during your testing. Please post
> bugs to the issue tracker and/or post to the developer forum:http://code.google.com/p/gmaps-api-issueshttp://groups.google.com/group/google-maps-js-api-v3
>
> To see more information about versioning of the Maps API, see documentation:http://code.google.com/apis/maps/documentation/javascript/basics.html...
>
> The full changelog for the Maps API can be found here:http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Cha...
>
> Thanks,
> Chris

Yu Yj

unread,
Nov 16, 2011, 3:01:59 AM11/16/11
to google-map...@googlegroups.com
How to get these editable shapes (marker,polygons, polylines, circles, rectangles), and save these shapes drawn?

Enoch Lau (Google Employee)

unread,
Nov 16, 2011, 3:42:43 AM11/16/11
to google-map...@googlegroups.com
The CSS for the new-look controls can be found here:

Enoch

RoyHB

unread,
Nov 16, 2011, 7:50:34 PM11/16/11
to Google Maps JavaScript API v3
Chris - I'd like to be able to examine the lat/lon of nodes in a
polyline that I created with drawingManager.
I've looked through the doco and I've used firebug to examine the
domain but I can't find any info related to the polyline that
drawingManager made.

Could you give us a hint (or a pointer to the doco) that would help?

Thanks - the drawing Manager is a great addition to the API

RoyHB
> Chris

Chris Broadfoot

unread,
Nov 16, 2011, 8:13:44 PM11/16/11
to google-map...@googlegroups.com
Hey Roy,

Listen to the "foocreated" events... "overlaycreated" to get an event for all overlays, or just "polylinecreated" for only polylines.

google.maps.event.addListener(drawingManager, 'polylinecreated', function(polyline) {
  console.log(polyline.getPath());
});

google.maps.event.addListener(drawingManager, 'overlaycreated', function(e) {
  if (e.type == google.maps.drawing.OverlayType.POLYLINE) {
    console.log(e.overlay.getPath());
  }
});


Events:

Cheers

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


koops

unread,
Nov 16, 2011, 8:21:36 PM11/16/11
to google-map...@googlegroups.com
Is there any way to delete points in a polyline?

RoyHB

unread,
Nov 17, 2011, 5:15:14 AM11/17/11
to Google Maps JavaScript API v3
Thanks Chris - worked well (except that I had to use
'polylinecomplete' instead of 'polylinecreated'.

Roy

On Nov 17, 12:13 pm, Chris Broadfoot <c...@google.com> wrote:
> Hey Roy,
>
> Listen to the "foocreated" events... "overlaycreated" to get an event for
> all overlays, or just "polylinecreated" for only polylines.
>
> google.maps.event.addListener(drawingManager, 'polylinecreated',
> function(polyline) {
>   console.log(polyline.getPath());
>
> });
>
> google.maps.event.addListener(drawingManager, 'overlaycreated', function(e)
> {
>   if (e.type == google.maps.drawing.OverlayType.POLYLINE) {
>     console.log(e.overlay.getPath());
>   }
>
> });
>
> http://code.google.com/apis/maps/documentation/javascript/reference.h...
>
> Events:http://code.google.com/apis/maps/documentation/javascript/overlays.ht...
>
> Cheers
> Chris
>
> --http://twitter.com/broady

koops

unread,
Nov 17, 2011, 12:57:29 PM11/17/11
to google-map...@googlegroups.com
How do you specify pre-existing polygons, lines, markers, etc. and make them editable? The docs say that path is ignored when specifying options. If you can only get data out and not put it in, the uses of the library are limited.


Silas

unread,
Nov 17, 2011, 6:13:30 PM11/17/11
to google-map...@googlegroups.com
First off, great job. Editable polygons are awesome! I just finished implementing my own editable polygons using markers but like the way google maps handles it. The only think I'm not so fond of are the huge squares at the vertices. Is there a way to specify your own icons for the prime vertices and the secondary vertices? If not, is there a way to choose a size for the squares? We really want to use this new feature but the large squares aren't as usable for our application. Thanks for all you great work!

Silas

Enoch Lau (Google Employee)

unread,
Nov 17, 2011, 6:16:14 PM11/17/11
to google-map...@googlegroups.com
http://code.google.com/apis/maps/documentation/javascript/reference.html#Polygon

Call setEditable(true). There's no need to load the drawing library to use setEditable.

koops

unread,
Nov 17, 2011, 6:25:48 PM11/17/11
to google-map...@googlegroups.com
Thanks. That information would be a nice addition somewhere in the drawing manager documentation.

Pablik

unread,
Nov 18, 2011, 1:57:19 PM11/18/11
to google-map...@googlegroups.com
Hello,

is there a way to disable map panning when polyline handle is being dragged to the edge of the map? This is quite a problem for me because I reload overlays on the map when it is idle - when polyline handle approaches edge, then map is panned, when panning stops, onIdle event is triggered and all overlays are discarded (including polyline which is being edited) and reloaded.
Thanks.

Pablik

Enoch Lau (Google Employee)

unread,
Nov 18, 2011, 3:54:45 PM11/18/11
to google-map...@googlegroups.com
Set 'draggable': false in MapOptions.

Enoch

Pablik

unread,
Nov 18, 2011, 4:20:29 PM11/18/11
to google-map...@googlegroups.com
I need the map to be draggable. Your solution would only help me if there was some event (similar to dragstart on Marker) which would be triggered when user starts to drag the polyline handle. On this event I would set draggable to false, and when the editing is finished I would set draggable to true again. I haven't found such event.

Pablik

Enoch Lau (Google Employee)

unread,
Nov 18, 2011, 8:33:33 PM11/18/11
to google-map...@googlegroups.com
That's true. Feel free to file a feature request on the issue tracker if such an event would be useful to you, and outline your use case.

Enoch

Nianwei Liu

unread,
Nov 19, 2011, 5:04:37 AM11/19/11
to Google Maps JavaScript API v3
As the blog put it, you want "adding your own annotations" to the
paper map. After you draw a circle, you really want to note what that
circle means. What's missing on the drawing toolbar is the "T"(text)
tool. That would be a TextOverlay or some sort(can also combine with
Rectangle overlay).

Pablik

unread,
Nov 19, 2011, 6:54:33 AM11/19/11
to google-map...@googlegroups.com
Thanks for answer.
New issue submited: Issue 3751

Pavel

Bjørn Konestabo

unread,
Nov 26, 2011, 6:55:01 PM11/26/11
to google-map...@googlegroups.com
The editable shapes are great.
However it's annoying that the markers placed on the polylines are inaccessible. I have a polyline editor but I cannot let the
user close the polyline to make a polygon because I cannot put a listener or the first marker.

Is there a way to get hold of that marker without resorting to DOM-tricks?


Enoch Lau (Google Employee)

unread,
Nov 27, 2011, 2:02:22 AM11/27/11
to google-map...@googlegroups.com
Can you explain further about what you mean by letting the user close the polyline to make a polygon?

Bill Chadwick

unread,
Dec 4, 2011, 1:11:35 PM12/4/11
to google-map...@googlegroups.com
It would be nice to have an event as each node of a polyline or polygon is created or moved for example to indicate polyline length or polygon area during editing.

Enoch Lau (Google Employee)

unread,
Dec 4, 2011, 4:57:50 PM12/4/11
to google-map...@googlegroups.com
Please add a feature request to the issue tracker: http://code.google.com/p/gmaps-api-issues/issues/list

Enoch

bryan.jones

unread,
Dec 5, 2011, 6:53:49 PM12/5/11
to google-map...@googlegroups.com
I'm also trying to find a block of code that shows how the user can be enabled to delete points on a polyline/polygon. I know it is something to do with remove_at and that you need to add a listener. Is there a special keystroke combination for the user to use having selected the point to be deleted.
 
I know this sounds very basic but it just does not seem to jump out of the documentation for me.
 
Look forward to hearing from you.

Enoch Lau (Google Employee)

unread,
Dec 5, 2011, 7:41:23 PM12/5/11
to google-map...@googlegroups.com
No this isn't possible in editable mode. Feel free to add a feature request: http://code.google.com/p/gmaps-api-issues/issues/list

Enoch

Bill Chadwick

unread,
Dec 7, 2011, 8:14:30 AM12/7/11
to google-map...@googlegroups.com
I have added a feature request suggesting a

google.maps.drawing.OverlayStartedEvent

in the handler for this, path, radius etc changed event handlers could be set up.

Also, polyline.setEditable could have a second parameter to request
'append' behaviour from DrawingManager and possibly a third parameter to enable node deletion.

geoco...@gmail.com

unread,
Dec 7, 2011, 8:22:51 AM12/7/11
to Google Maps JavaScript API v3
On Dec 7, 5:14 am, Bill Chadwick <bill.chadwi...@googlemail.com>
wrote:

Here is the issue:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3805

Please star it if you are interested in having it implemented, so
google can judge interest.

Jakub Synowiec

unread,
Dec 9, 2011, 8:36:39 AM12/9/11
to google-map...@googlegroups.com
I've implemented my own functionality of editing polylines by dragging their vertices, adding a new ones on the path and removing others. Now, I would like to migrate my code to this native solution, but I can't find a way to remove those rectangle path-markers from polyline when editable is set to true. Also is there a way to hook into left/right mouse click or drag events of those markers?

Bill Chadwick

unread,
Dec 13, 2011, 5:02:08 PM12/13/11
to google-map...@googlegroups.com
On Android Tablet (Galaxy Tab 10.1 at least) we need bigger node boxes for polyline/polygon editing by drag.

Enoch Lau (Google Employee)

unread,
Dec 16, 2011, 1:42:44 AM12/16/11
to google-map...@googlegroups.com
On touch devices, the editing control points appear to be the same size as on desktop, but they actually have invisible padding around them that can receive events. Are you not seeing this behavior on your Galaxy Tab?

Enoch

mike bertram

unread,
Dec 17, 2011, 3:37:05 PM12/17/11
to Google Maps JavaScript API v3
My site has stopped working with the Chrome browser (version
16.0.912.63) using v3.7 of the API. It works fine on v3.6. I first
noticed the problem yesterday afternoon (16th Dec). IE & Safari are
still working fine. I noticed the issue when I was working in the
development environment but when I checked the production environment
the problem was also apparent (I know, I have now learnt that I should
specify version number). The production environment is at
http://tehistory.org/tt18c/18cTredyffrin.html, has been in successful
operation for over a year and was last updated in May. Select any of
the interactive maps on the menu. The production environment is being
updated to load v3.6 at this point in time so you probably no longer
can see the problem.

The maps fail to appear due to the error:
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/7/5/main.js Failed
to load resource.

The production environment is on GoDaddy servers. The development
environment is on my Windows 7 machine.

Mike

Cpt. Jack Sparrow

unread,
Jan 6, 2012, 8:49:12 AM1/6/12
to google-map...@googlegroups.com
hi,

Is there any way to have the "Search near by" & "Get Directions" feature implemented by default in an Infowindow, without having to implement the directions and places API calls myself ?

Cpt. Jack Sparrow

unread,
Jan 6, 2012, 9:24:19 AM1/6/12
to google-map...@googlegroups.com
I mean the InfoWindow for markers and not other shapes.

rtp

unread,
Jan 17, 2012, 12:31:16 PM1/17/12
to google-map...@googlegroups.com
Hope this makes sense:

when in editable mode on a feature such as a polyline and you move one of the "translucent" nodes to insert a new node, and then you click the "undo" icon that shows up next to it to put the polyline back to how it was before you moved the "translucent" node, is there an event that can be listened for when that "undo" icon is clicked?

thanks
rtp

rtp

unread,
Jan 17, 2012, 3:37:52 PM1/17/12
to google-map...@googlegroups.com
Hi all,

I tried asking a similar question earlier, but not sure if it posted or not.  If this is ends up duplicating what I tried to post earlier, I hope one of them gets deleted.  Here goes: 

Is there an event that can be captured when you click the "undo" icon on an insert_at event type?  For example, if you move a node on a polyline you can add a listener for the set_at event on the initial move.  If you click the "undo" icon immediately afterwards, it fires another set_at event which can be captured by your listener for the set_at event.  However, if you "insert" a node on a polyline, an insert_at event can be captured with a listener, but if you click the "undo" icon, it appears that an insert_at event is not fired because the listener does not capture that "undo" as the previously mentioned set_at event does.  Logically, these seems correct because at that point, I would not consider it to be an insert_at event.  So again, is there another event being fired such that a listener can be added to capture the "undo" event of an insert_at event?  I do not see anything in the documentation stating as such, but that doesn't mean I did not miss something.  Any help would be appreciated.

thank you,
rtp

rtp

unread,
Jan 18, 2012, 12:00:03 PM1/18/12
to google-map...@googlegroups.com
Well, answered my own question.  Need to listen for the REMOVE_AT event.  My Master of the Obvious degree failed me yesterday, but it appears to have kicked in today. 

rtp

unread,
Jan 18, 2012, 12:01:58 PM1/18/12
to google-map...@googlegroups.com
See my previous post and reply.  Need to listen for the REMOVE_AT event
thanks
rtp

netsracs

unread,
Jan 22, 2012, 1:18:01 PM1/22/12
to google-map...@googlegroups.com
Hello,

is there any function to save a polygon?? I tried to much ...

Cpt. Jack Sparrow

unread,
Jan 22, 2012, 11:41:34 PM1/22/12
to google-map...@googlegroups.com
hi,

I am making a opensource wrapper for gmap V3 library.
its at
http://code.google.com/p/blitz-gmap-editor/

you can use it to save all the shapes you draw in your database in JSON format.
it also recreates everything from the stores string with one function call.

only thing is it works with only one Map on the page and I have not yet written enough documentation as I am still working on it.

-sameer

Капралов Александр

unread,
Jan 23, 2012, 12:45:04 AM1/23/12
to google-map...@googlegroups.com
Have you any demo?

2012/1/23 Cpt. Jack Sparrow <sami...@gmail.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-maps-js-api-v3/-/SyXxiq4SwrQJ.
> To post to this group, send email to google-map...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-a...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Cpt. Jack Sparrow

unread,
Jan 23, 2012, 12:52:34 AM1/23/12
to google-map...@googlegroups.com
hi,
i have not yet setup demos yet,
but will do it in some time.
to demonstrate saving the map as a json string
and one to loading map from json string

-sameer
Message has been deleted

Cpt. Jack Sparrow

unread,
Jan 23, 2012, 1:09:46 AM1/23/12
to google-map...@googlegroups.com
ok here are the demos

1. Creating map objects and saving to string
http://possible.in/blitz-gmap-editor/test2.html

2. Loading from a saved map, it loads from content on a textarea
http://possible.in/blitz-gmap-editor/test1.html

It also has a toKML() feature but its not completely ready yet.

Let me know if you feel its missing something or if there are bugs.

Капралов Александр

unread,
Jan 23, 2012, 1:37:57 AM1/23/12
to google-map...@googlegroups.com
thanks.

2012/1/23 Cpt. Jack Sparrow <sami...@gmail.com>:

> --
> You received this message because you are subscribed to the Google Groups
> "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/google-maps-js-api-v3/-/OiX6vauveU0J.

Ilya

unread,
Mar 16, 2012, 1:07:35 PM3/16/12
to google-map...@googlegroups.com
Did you find a way to make vertices squares smaller or to make the more transparent? The only idea I have is to use jquery selectors to modify opacity on all vertices...

haha89081

unread,
Apr 28, 2012, 10:02:58 AM4/28/12
to google-map...@googlegroups.com
now I can't see the Drawing tool API document , where can find the API document ?

Ilya於 2012年3月17日星期六UTC+8上午1時07分35秒寫道:

Enoch Lau (Google Employee)

unread,
Apr 28, 2012, 11:03:35 PM4/28/12
to google-map...@googlegroups.com

Yang Chiliy

unread,
Apr 29, 2012, 2:09:58 AM4/29/12
to google-map...@googlegroups.com
hi  Enoch  

this link can't see drawing api documnet , original link is gone.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.



--
BR
Chilly

Enoch Lau (Google Employee)

unread,
Apr 29, 2012, 7:55:12 AM4/29/12
to google-map...@googlegroups.com
What do you mean by the drawing api document? What did this document contain?

Yang Chiliy

unread,
Apr 29, 2012, 9:28:44 AM4/29/12
to google-map...@googlegroups.com
many thanks !

2012/4/29 Enoch Lau (Google Employee) <enoc...@google.com>
What do you mean by the drawing api document? What did this document contain?

If you wanted the reference, here's a link: https://developers.google.com/maps/documentation/javascript/reference#DrawingManager


On Sunday, April 29, 2012 4:09:58 PM UTC+10, haha89081 wrote:
hi  Enoch  

this link can't see drawing api documnet , original link is gone.

BR

2012/4/29 Enoch Lau (Google Employee) <enoc...@google.com>
https://developers.google.com/maps/documentation/javascript/overlays#drawing_tools


On Sunday, April 29, 2012 12:02:58 AM UTC+10, haha89081 wrote:
now I can't see the Drawing tool API document , where can find the API document ?

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.



--
BR
Chilly

Reply all
Reply to author
Forward
0 new messages