Clickable "select your country" map

2,833 views
Skip to first unread message

Dwayne Henderson

unread,
Sep 19, 2011, 11:56:31 AM9/19/11
to Google Maps JavaScript API v3
Hello!

Is there a way of doing a clickable minimalist black/white "select
your country" thing like on
http://www.luisaviaroma.com/index.aspx?#getLogIn.aspx|CallType=CurrAndShip&action=vis&season=actual&gender=women
using Google Maps?

--Dwayne

arclyte

unread,
Sep 19, 2011, 4:01:57 PM9/19/11
to google-map...@googlegroups.com
I can't say this with absolute certainty, but my first reaction is to say yes.  But, unless you're looking for something a bit more sophisticated than the sample you've sent I think it'd be overkill.  You'd have to devise your own overlays and do boundary checks to see what country they've selected, etc. By the time it was finished you'd probably be better off building a custom solution such as in the example using a few simple images.  Now, if you want to further refine it by letting them select their state/province or exact location and display map data based on that it may suit you, but a simple country selector would be more complicated than it's worth, imho.

xelawho

unread,
Sep 19, 2011, 4:38:59 PM9/19/11
to Google Maps JavaScript API v3
maybe - but it's only 5 overlays after all. The boundaries would be
very rudimentary - they'd probably take about 5 minutes to draw...

geoco...@gmail.com

unread,
Sep 19, 2011, 4:48:06 PM9/19/11
to Google Maps JavaScript API v3
On Sep 19, 8:56 am, Dwayne Henderson <its.code.in.h...@gmail.com>
wrote:
I don't see any map at that link in Firefox...

You could look at using FusionTables and the Natural Earth Data
publicly available there.
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=Natural+Earth&qt_g=Search+this+group

-- Larry

>
> --Dwayne

Lloyd Force

unread,
Sep 20, 2011, 5:19:37 PM9/20/11
to Google Maps JavaScript API v3
Using KML and geoxml3, something like that is both easy and possible,
but could easily be overkill for simple usecases (remember: do the
simplest thing that could possibly work and that does not suck).

1) To get the minimalist effect, you need to define a custom map style
and turn off everything (or set it all to white or whatever the
background color is). 2) You can then throw the KML on the map (which
renders pretty fast) and add mouseover events, etc.

You can use this site to create the blank map style:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
.

You then need to find KML for the world's countries. Here is one
result I found on google: http://bbs.keyhole.com/ubb/ubbthreads.php?ubb=download&Number=140238.
You can see the KML on a normal google map here:
http://maps.google.com/maps?q=http:%2F%2Fbbs.keyhole.com%2Fubb%2Fubbthreads.php%3Fubb%3Ddownload%26Number%3D140238&hl=en&ll=-3.19792,29.19615&spn=178.690108,2.109375&sll=-3.19792,29.19615&sspn=162.696622,181.054688&vpsrc=0&t=m&z=1

You can completely override the colors / styles of the KML polygons
using geoxml3.

Let me know if you'd like more info about the technique. I used it
recently on this site - https://bit.ly/statsmap and the clients are
reasonably pleased with the result.

Regards,
Lloyd


On Sep 19, 11:56 am, Dwayne Henderson <its.code.in.h...@gmail.com>
wrote:
> Hello!
>
> Is there a way of doing a clickable minimalist black/white "select
> your country" thing like onhttp://www.luisaviaroma.com/index.aspx?#getLogIn.aspx|CallType=CurrAndShip&action=vis&season=actual&gender=women
> using Google Maps?
>
> --Dwayne

geoco...@gmail.com

unread,
Oct 15, 2011, 1:27:09 PM10/15/11
to Google Maps JavaScript API v3
On Sep 19, 1:48 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Sep 19, 8:56 am, Dwayne Henderson <its.code.in.h...@gmail.com>
> wrote:> Hello!
>
> > Is there a way of doing aclickableminimalist black/white "select
> I don't see anymapat that link in Firefox...
>
> You could look at using FusionTables and the Natural Earth Data
> publicly available there.http://groups.google.com/group/google-maps-js-api-v3/search?group=goo...

Here is an example that solves the FusionTables "dot" issue at zoom 0
and 1:
http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries.html

  -- Larry

>
>
>
>
>
>
>
>
> > --Dwayne

geoco...@gmail.com

unread,
Oct 15, 2011, 2:13:40 PM10/15/11
to Google Maps JavaScript API v3
On Oct 15, 10:27 am, "geocode...@gmail.com" <geocode...@gmail.com>
But, of course, the simplest answer is just to use KmlLayer by
itself...

http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

    -- Larry
>
>
>
>
>
>
>
>
>
> > > --Dwayne
Reply all
Reply to author
Forward
0 new messages