Example of map with Dropdown menu to V3

4,985 views
Skip to first unread message

sfdude

unread,
Aug 16, 2009, 5:46:35 PM8/16/09
to Google Maps JavaScript API v3
Hi all!

Has anybody tried to convert this great example
of a map with Dropdown selection menu
(API V2) by Mike Williams - to API V3?

http://econym.org.uk/gmap/example_map15c.htm

I can't even find a similar example,
(ie: dropdown menu selection of markers), for V3...
Thks!
SFdude

pamela (Google Employee)

unread,
Aug 19, 2009, 11:12:15 PM8/19/09
to google-map...@googlegroups.com
Hi SFdude-

I haven't seen a v3 version of that. It should be easy to port though,
v3 has functions like trigger and addListener. Be sure to post in the
group if you end up porting it yourself (or if you have trouble doing
so).

- pamela

Stephen J. Fuhry

unread,
Aug 20, 2009, 8:01:43 AM8/20/09
to Google Maps JavaScript API v3
This is still V2, but I've always been impressed by the slickness of
this example:
http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics

I'm planning on implementing something similar using V3 (hopefully
tonight if I get the chance..). I'll post if I do.

Solo

unread,
Aug 20, 2009, 9:27:16 AM8/20/09
to Google Maps JavaScript API v3
Hello!

I did some similar stuff using Mike Williams examples with V3 here
http://www.platform.com/company/contact-us
and here
http://www.webpilot.ru/z_GoogleMapV3/mover/gmap_mover_obj.html

Hope it will help.

calintel

unread,
Aug 20, 2009, 7:37:40 PM8/20/09
to google-map...@googlegroups.com
Thanks Stephen -
  Yes! - looking forward to see your port
  of this excellent Dropdown Menu example :
       http://econym.org.uk/gmap/example_map15c.htm
  to API V3!

Pamela, Solo: Thanks for your replies, too!

SFdude

Stephen J. Fuhry

unread,
Aug 21, 2009, 9:25:29 PM8/21/09
to Google Maps JavaScript API v3
Here it is. The markers won't load until your zoom level is < 10, and
even then sometimes they can be a little fussy (I had to use
jdpatterson's (see link below) hack to make the get_bounds function to
work at all.. and it can be a little fussy -- but they'll load!).

The left sidebar will populate with a list of all the markers, and
when you click on them the map will center on the marker you click on.
I have not yet figured out how to wait until set_center() is done so I
can open an infowindow after the map is centered, but if you click on
a marker that is already centered, its infowindow will open.

http://test.findacatholicmass.com/findacatholicmass/

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371&q=apitype%3AJavascript3%20type%3ADefect&sort=-stars&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Internal%20Stars#c2

Let me know if anything is confusing. I use jQuery, because it kicks
ass.



On Aug 20, 7:37 pm, calintel <calin...@gmail.com> wrote:
> *Thanks Stephen - *
>   Yes! - looking forward to see your port
>   of this excellent *Dropdown Menu example* :
>        http://econym.org.uk/gmap/example_map15c.htm
>   to API V3!
>
> *Pamela, Solo:* Thanks for your replies, too!
>
> *SFdude*

sfdude

unread,
Aug 22, 2009, 4:59:01 AM8/22/09
to Google Maps JavaScript API v3
Hi Stephen and V3 group,

Liked your alpha example, Stephen.

But, the reason I'm looking for an API V3 example,
with a *Dropdown Menu* to select Markers - not a sidebar,
(as indicated in the title of this thread),
is this:

On an iPhone ( -or any other mobile device),
API V3 maps load faster than V2 maps. Yes!

BUT....
the screen real estate is much smaller
that on a conventional screen.
So, sidebars and data-entry fields
are not a good option on a mobile screen.
And you don't want the User typing marker names
on a mobile phone, either...

That is why, *in practical terms*,
a Dropdown Menu to select markers
is a MUST for an iPhone,
as in this good API V2 DD Menu example from Mike Williams:
http://econym.org.uk/gmap/example_map15c.htm (pls, see)

Hope this makes sense and
a corresponding API V3 example surfaces somewhere...
like a yellow submarine.

SFdude




On Aug 21, 10:25 pm, "Stephen J. Fuhry" <fuhryst...@gmail.com> wrote:
> Here it is. The markers won't load until your zoom level is < 10, and
> even then sometimes they can be a little fussy (I had to use
> jdpatterson's (see link below) hack to make the get_bounds function to
> work at all.. and it can be a little fussy -- but they'll load!).
>
> The left sidebar will populate with a list of all the markers, and
> when you click on them the map will center on the marker you click on.
> I have not yet figured out how to wait until set_center() is done so I
> can open an infowindow after the map is centered, but if you click on
> a marker that is already centered, its infowindow will open.
>
> http://test.findacatholicmass.com/findacatholicmass/
>
> http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371&q=api...

Stephen J. Fuhry

unread,
Aug 22, 2009, 1:39:14 PM8/22/09
to Google Maps JavaScript API v3
A dropdown menu would be almost exactly the same.. It would look
something like this (this is not tested, but it should work):

<select id="mySelect"></select>

// create the event that moves the marker when you change an option in
the select menu
$(document).ready(function(){
$("select#mySelect").change(function(){
gotoMarker($(this).val());
});
});


function makeMarkerList() {
var options = "";
$("select#mySelect").empty();
for (var i in allMarkers) {
options += "<option value='" + i + "'>" + allMarkers[i].map.title +
"</option>";
}
$("select#mySelect").html(options);

sfdude

unread,
Aug 22, 2009, 5:40:06 PM8/22/09
to Google Maps JavaScript API v3
Thanks for the jQ pointer, Stephen.

Will try until I get
an example like this:
http://econym.org.uk/gmap/example_map15c.htm
working in API V3.
(useful for iPhone or Android mobile devices).


Reply all
Reply to author
Forward
0 new messages