[Google Maps API v3] Dragging Map under Stationary Marker

208 views
Skip to first unread message

mlvfd

unread,
Apr 29, 2010, 11:20:55 AM4/29/10
to Google Maps JavaScript API v3
The example at Google (http://code.google.com/p/gmaps-samples-v3/
source/browse/trunk/draggable-markers/draggable-markers.html?
spec=svn49&r=49) does almost exactly what I need. However, ror my
application I would like the marker to stay right in the middle of the
map (never moving). The user would drag the map underneath the marker
to the "target" location. Then the listener would get the lat/lon for
the marker once the drag was completed. Any help would be appreciated!

--
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.

Luke Mahé

unread,
Apr 29, 2010, 12:58:58 PM4/29/10
to google-map...@googlegroups.com
Hi,

The best solution is to use MVC techniques to bind the marker's position property to the map's center property:

var marker = new google.maps.Marker({
  map: map
});

marker.bindTo('position', map, 'center');

Hope this helps.

- Luke

mlvfd

unread,
May 2, 2010, 9:16:05 PM5/2/10
to Google Maps JavaScript API v3
Thanks. This worked although the marker flutters quite a bit. Would
it be possible to, once someone started to drag the underlying map, to
"detach" the marker from the map and then, at "dragend" place it where
it lies, still in the middle of the canvas? Or a simple transparent
circle overlay which did the same thing e.g. stayed "in front" of the
map as it moved underneath. I'm trying to give people a "target/cross-
hairs" to capture lat/long so I'm not going to actually "attach" the
marker to the map until later on. Hopefully that makes sense... I'll
keep playing with the binding but it didn't work on the iphone which
is the ultimate target device. Any other thoughts would be
welcomed... thanks again!

On Apr 29, 12:58 pm, Luke Mahé <lu...@google.com> wrote:
> Hi,
>
> The best solution is to use MVC techniques to bind the marker's position
> property to the map's center property:
>
> var marker = new google.maps.Marker({
>   map: map
>
> });
>
> marker.bindTo('position', map, 'center');
>
> Hope this helps.
>
> - Luke
>
>
>
> On Thu, Apr 29, 2010 at 8:20 AM, mlvfd <mlvfd...@gmail.com> wrote:
> > The example at Google (http://code.google.com/p/gmaps-samples-v3/
> > source/browse/trunk/draggable-markers/draggable-markers.html?
> > spec=svn49&r=49) does almost exactly what I need.  However, ror my
> > application I would like the marker to stay right in the middle of the
> > map (never moving). The user would drag the map underneath the marker
> > to the "target" location.  Then the listener would get the lat/lon for
> > the marker once the drag was completed.  Any help would be appreciated!
>
> > --
> > 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%2Bunsu...@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.

Ben Appleton

unread,
May 2, 2010, 10:03:10 PM5/2/10
to google-map...@googlegroups.com
Consider inserting a centered cross hair image into the map div.

Marc Ridey

unread,
May 3, 2010, 1:55:47 AM5/3/10
to google-map...@googlegroups.com
Alternatively, look at this blog on keeping a cross in the center of the map: http://blog.mridey.com/2009/09/in-my-previous-post-i-showed-how-to.html

On Mon, May 3, 2010 at 11:16 AM, mlvfd <mlvf...@gmail.com> wrote:

mlvfd

unread,
May 3, 2010, 4:51:40 PM5/3/10
to Google Maps JavaScript API v3
Thanks very much to everyone. I tried the CSS approach and its
working great. Thanks Marc! Let me know if you come up with any new
CrosShairS :) Now I just need to get the lat/lon into my form from
the underlying map but I should be able to figure that out... unless
your crosshair code has any nuances I should know about. I doubt it
since you aren't interacting with the map really(?)

Thanks again!
> > <google-maps-js-api-v3%2Bunsu...@googlegroups.com<google-maps-js-api-v3%252Buns...@googlegroups.com>

Mike Swope

unread,
May 3, 2010, 7:18:03 PM5/3/10
to google-map...@googlegroups.com
http://mapper.acme.com/ has lat/lon and crosshair. Might see how he did it for ideas. 
Reply all
Reply to author
Forward
0 new messages