[Google Maps API v3] Custom Circle Overlay with text
1,945 views
Skip to first unread message
Bradley
Apr 20, 2010, 4:37:47 PM4/20/10
to Google Maps JavaScript API v3
I've been exploring V3 for a bit and I noticed the Circle overlay,
plus the ability to create custom overlays by extending
google.maps.OverlayView.
I'm trying to combine these so I can have a circle overlay with some
custom, dynamically generated text inside. The examples on custom
overlays just deal with DOM elements like images, but I'm wondering
how one might achieve this with maps specific overlays, ie. circles.
I noticed SVG elements on the map when creating the circle. Is there
a way I can just overlay text on top of this? A point in the right
direction or any pseudo code is appreciated, I'm actively trying to
solve this at the moment.
--
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.
plus the ability to create custom overlays by extending
google.maps.OverlayView.
I'm trying to combine these so I can have a circle overlay with some
custom, dynamically generated text inside. The examples on custom
overlays just deal with DOM elements like images, but I'm wondering
how one might achieve this with maps specific overlays, ie. circles.
I noticed SVG elements on the map when creating the circle. Is there
a way I can just overlay text on top of this? A point in the right
direction or any pseudo code is appreciated, I'm actively trying to
solve this at the moment.
--
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.
Bradley
Apr 20, 2010, 4:55:32 PM4/20/10
to Google Maps JavaScript API v3
It should be noted that the intention here is to be able to generate
many circle overlays of different colours each with different sizes
and text, which is why I'd like to avoid an image.
many circle overlays of different colours each with different sizes
and text, which is why I'd like to avoid an image.
Luke Mahé
Apr 20, 2010, 6:15:59 PM4/20/10
to google-map...@googlegroups.com
Hi Bradley,
You should be able to do this by using the OverlayView, the Circle overlay and some MVC techniques.
You can read about the OverlayView in the docs (http://code.google.com/apis/maps/documentation/v3/overlays.html#CustomOverlays) and about MVC techniques in a article that I recently wrote (http://code.google.com/apis/maps/articles/mvcfun.html)
Hope this helps
- Luke
Bradley
Apr 21, 2010, 3:04:44 PM4/21/10
to Google Maps JavaScript API v3
Your tutorial states:
distance_changed() ... is a magic function
I'm trying to sort this out, but is this to say that every MVCObject
property has an event *propertyName*_changed triggered when the
property is set ??
On Apr 20, 6:15 pm, Luke Mahé <lu...@google.com> wrote:
> Hi Bradley,
>
> You should be able to do this by using the OverlayView, the Circle overlay
> and some MVC techniques.
>
> You can read about the OverlayView in the docs (http://code.google.com/apis/maps/documentation/v3/overlays.html#Custo...)
> > .
> > .
distance_changed() ... is a magic function
I'm trying to sort this out, but is this to say that every MVCObject
property has an event *propertyName*_changed triggered when the
property is set ??
On Apr 20, 6:15 pm, Luke Mahé <lu...@google.com> wrote:
> Hi Bradley,
>
> You should be able to do this by using the OverlayView, the Circle overlay
> and some MVC techniques.
>
> and
> about MVC techniques in a article that I recently wrote (http://code.google.com/apis/maps/articles/mvcfun.html)
>
> Hope this helps
>
> - Luke
>
> <http://code.google.com/apis/maps/articles/mvcfun.html>
> about MVC techniques in a article that I recently wrote (http://code.google.com/apis/maps/articles/mvcfun.html)
>
> Hope this helps
>
> - Luke
>
>
>
>
>
>
> On Tue, Apr 20, 2010 at 1:55 PM, Bradley <bradleyrobert...@gmail.com> wrote:
> > It should be noted that the intention here is to be able to generate
> > many circle overlays of different colours each with different sizes
> > and text, which is why I'd like to avoid an image.
>
> > On Apr 20, 4:37 pm, Bradley <bradleyrobert...@gmail.com> wrote:
> > > I've been exploring V3 for a bit and I noticed the Circle overlay,
> > > plus the ability to create custom overlays by extending
> > > google.maps.OverlayView.
>
> > > I'm trying to combine these so I can have a circle overlay with some
> > > custom, dynamically generated text inside. The examples on custom
> > > overlays just deal with DOM elements like images, but I'm wondering
> > > how one might achieve this with maps specific overlays, ie. circles.
>
> > > I noticed SVG elements on the map when creating the circle. Is there
> > > a way I can just overlay text on top of this? A point in the right
> > > direction or any pseudo code is appreciated, I'm actively trying to
> > > solve this at the moment.
>
> > > --
> > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
>
>
>
>
> On Tue, Apr 20, 2010 at 1:55 PM, Bradley <bradleyrobert...@gmail.com> wrote:
> > It should be noted that the intention here is to be able to generate
> > many circle overlays of different colours each with different sizes
> > and text, which is why I'd like to avoid an image.
>
> > On Apr 20, 4:37 pm, Bradley <bradleyrobert...@gmail.com> wrote:
> > > I've been exploring V3 for a bit and I noticed the Circle overlay,
> > > plus the ability to create custom overlays by extending
> > > google.maps.OverlayView.
>
> > > I'm trying to combine these so I can have a circle overlay with some
> > > custom, dynamically generated text inside. The examples on custom
> > > overlays just deal with DOM elements like images, but I'm wondering
> > > how one might achieve this with maps specific overlays, ie. circles.
>
> > > I noticed SVG elements on the map when creating the circle. Is there
> > > a way I can just overlay text on top of this? A point in the right
> > > direction or any pseudo code is appreciated, I'm actively trying to
> > > solve this at the moment.
>
> > > --
> > > 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
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > 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
> > .
Luke Mahé
Apr 21, 2010, 4:31:24 PM4/21/10
to google-map...@googlegroups.com
Hey Bradley,
Answers are inline.
On Wed, Apr 21, 2010 at 6:58 AM, Bradley <bradleyr...@gmail.com> wrote:
Hi Luke,
Thanks, that's a great tutorial and really explains the bindings a lot
better than the Maps Overlays docs. I read through the docs on Custom
Overlays prior to posting, but still needed some clarification. One
thing I'm noticing is that you're extending MVCObject() instead of
OverlayView() as the docs suggest. Can you tell me the reasoning for
this? And the difference?
A OverlayView is essentially a MVCObject with some extra things like the MapCanvasProjection. For my example I didn't need it so I only extended the MVCObject.
Also, I have a couple other questions if you have the time:
1. In your example, you have the
RadiusWidget.prototype.center_changed, but I don't actually see
anywhere that this gets called? I can only assume that it has to do
with the bindings but I'm still kind of confused as to how this works
All MVC properties that are 'set' automatically fire an event XXX_changed
2. I'm looking to draw circles that are all relative (in size) to each
other, no matter where on the map they lie. This is because the size
of my circle will represent, for instance, the population of a
location. With the current API however it appears that locations
closer to the equator are smaller because of projection. Can you
suggest the best mechanism for having relatively sized circles so that
their position does not skew their size?
The sizes skew because that's how a circle looks on a sphere, you could instead try creating a DIV with a OverlayView and set a border radius to create a circle (but this will only work with CSS3 browsers) or you could create your own SVG object. This is more related to drawing circles in HTML rather than Google Maps itself so you could do some Google searches for other suggestions.
3. Regarding style, is the _ syntax at the end of some of your methods
(ie. RadiusWidget.prototype.distanceBetweenPoints_) meant to denote
"private" methods?
That is correct, I find that it helps readability.
Thanks for all of your help, it's much appreciated.
Brad
> Hi Bradley,
>
> You should be able to do this by using the OverlayView, the Circle overlay
> and some MVC techniques.
>
> You can read about the OverlayView in the docs (http://code.google.com/apis/maps/documentation/v3/overlays.html#Custo...)
> and
> about MVC techniques in a article that I recently wrote (http://code.google.com/apis/maps/articles/mvcfun.html)
>
> Hope this helps
>
> - Luke
>
> On Tue, Apr 20, 2010 at 1:55 PM, Bradley <bradleyrobert...@gmail.com> wrote:
> > It should be noted that the intention here is to be able to generate
> > many circle overlays of different colours each with different sizes
> > and text, which is why I'd like to avoid an image.
>
> > On Apr 20, 4:37 pm, Bradley <bradleyrobert...@gmail.com> wrote:
> > > I've been exploring V3 for a bit and I noticed the Circle overlay,
> > > plus the ability to create custom overlays by extending
> > > google.maps.OverlayView.
>
> > > I'm trying to combine these so I can have a circle overlay with some
> > > custom, dynamically generated text inside. The examples on custom
> > > overlays just deal with DOM elements like images, but I'm wondering
> > > how one might achieve this with maps specific overlays, ie. circles.
>
> > > I noticed SVG elements on the map when creating the circle. Is there
> > > a way I can just overlay text on top of this? A point in the right
> > > direction or any pseudo code is appreciated, I'm actively trying to
> > > solve this at the moment.
>
> > > --
> > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > For more options, visit this group at
> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> --
> 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 athttp://groups.google.com/group/google-maps-js-api-v3?hl=en.
Bradley
Apr 21, 2010, 5:06:27 PM4/21/10
to Google Maps JavaScript API v3
Great, Thanks Luke.
I've implemented a scaling factor of secant(latitude) which is (from
what i've read) How mercator projection scaling works. The images
still look "slightly" skewed near the poles but their sizes are about
the same, and the skewing is almost unnoticeable.
I couldn't get the XXX_changed to work originally as my prototype
extension declaration (MyObj.prototype = new MVCObject()) was made
*after* my XXX_changed declaration. I didn't realize order like that
matter in javascript (might be worth noting in the docs)
Now I'm just trying to sort out how to convert pixel radii to physical
map radii (in meters) as I need to have my images scale on zoom to
maintain a constant pixel size (ugh) If only one could specify a
radius in px, that would save me a lot of trouble.
Really appreciate all the help!
Brad
> > > > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B
I've implemented a scaling factor of secant(latitude) which is (from
what i've read) How mercator projection scaling works. The images
still look "slightly" skewed near the poles but their sizes are about
the same, and the skewing is almost unnoticeable.
I couldn't get the XXX_changed to work originally as my prototype
extension declaration (MyObj.prototype = new MVCObject()) was made
*after* my XXX_changed declaration. I didn't realize order like that
matter in javascript (might be worth noting in the docs)
Now I'm just trying to sort out how to convert pixel radii to physical
map radii (in meters) as I need to have my images scale on zoom to
maintain a constant pixel size (ugh) If only one could specify a
radius in px, that would save me a lot of trouble.
Really appreciate all the help!
Brad
> > unsub...@googlegroups.com>
> > > > .
> > > > > For more options, visit this group athttp://
> > > > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > > --
> > > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com><google-maps-js-api-v3%2B
> > > > .
> > > > > For more options, visit this group athttp://
> > > > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > > --
> > > > 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
> > unsub...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > --
> > > 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
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > > --
> > > 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<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> --
> 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.
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> --
> 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.
Reply all
Reply to author
Forward
0 new messages