[Google Maps API v3] Custom Map Type with background color

2,525 views
Skip to first unread message

rccc

unread,
Apr 27, 2010, 4:35:42 AM4/27/10
to Google Maps JavaScript API v3
Hello,

Here is a V2 example showing two custom map types with white and black
background color:

http://koti.mbnet.fi/ojalesa/googlepages/black_white.htm

I wonder if it's possible to implement this with the V3.

I don't think so : concerning the background color option, the
documentation says that "Color used for the background of the Map
div. This color will be visible when tiles have not yet loaded as the
user pans. This option can only be set when the map is initialized."

So it seems we can't play with background color anymore. Is there
anyone that can confirms this ?

thanks by advance

rccc

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

Esa

unread,
Apr 27, 2010, 5:23:58 PM4/27/10
to Google Maps JavaScript API v3
You can set it after initializing by accessing your map div:

document.getElementById("map_canvas").style.backgroundColor = "red";

It seems to me that API does not reset the setting even when you zoom
or switch the map type.

rccc

unread,
Apr 28, 2010, 6:31:55 AM4/28/10
to Google Maps JavaScript API v3
@Esa,

You are right. But comparing to your example (
http://koti.mbnet.fi/ojalesa/googlepages/black_white.htm ), it seems
that tiles have no transparency in V3.

It seems that we couln't have these white and black effect anymore, or
maybe i miss something ?

What i mean is that we are able to see white or black color during
tiles loading, but once loaded, we couldn't have the same effect as in
your example where we can see black or white color after tiles are
loaded...

i hope i'm clear enough, sorry for may poor english...

Cheers

Daniels Lee™

unread,
May 4, 2010, 6:23:16 PM5/4/10
to google-map...@googlegroups.com
Thanks Esa.

Are you stating that the API should reset the map div's background color every time the map type or zoom level has changed?
--
Daniels Lee
Developer Programs Engineer
Google, Inc.
345 Spear Street
San Francisco, CA 94105
650 253 0967

ricco *

unread,
May 5, 2010, 10:08:12 AM5/5/10
to google-map...@googlegroups.com
Hello,

@daniels

I'm not stating anything, i was just wondering how to do this http://koti.mbnet.fi/ojalesa/googlepages/black_white.htm with the V3 api.

Cheers

riccco


2010/5/5 Daniels Lee™ <dani...@google.com>

Daniels Lee™

unread,
May 5, 2010, 2:36:06 PM5/5/10
to google-map...@googlegroups.com
Hey Ricco,

Currently, there's no way to access tile layers behind each MapType, which would prevent you from replicating your example in V3.

Besides styling use-cases like the one you provided, what other ways would you envision yourself benefiting from accessing the transparent tile layers within a Hybrid map type, or any map type in general?


Thanks,

Dann

William

unread,
May 6, 2010, 9:05:02 AM5/6/10
to Google Maps JavaScript API v3
On May 6, 4:36 am, Daniels Lee™ <daniel...@google.com> wrote:
> Besides styling use-cases like the one you provided, what other ways would
> you envision yourself benefiting from accessing the transparent tile layers
> within a Hybrid map type, or any map type in general?
>

these layers are useful when you have a colorful thematic map and all
you need is a black and white overlay, like the Fund Race map done by
the Huffington Post

http://fundrace.huffingtonpost.com/

another example is a radar map:

http://www.william-map.com/20100506/2/map.htm

...

ricco *

unread,
May 6, 2010, 10:01:08 AM5/6/10
to google-map...@googlegroups.com
Hello,

@William : your example is great ( http://www.william-map.com/20100506/2/map.htm ), the subjetc of my first post was for asking if this kind of example could be done in V3.

In your example, the tiles seems to be transparent, so that we can see the blue color you have set as background-color, but it seems that is no more possible with the V3 because if you set the background color, you won't be able to see it as it can be seen in your example...

 cheers

2010/5/6 William <willia...@gmail.com>

ricco *

unread,
May 6, 2010, 10:03:59 AM5/6/10
to google-map...@googlegroups.com
...

this example seems to do it well : http://www.philageohistory.org/tiles/mobile/

2010/5/6 ricco * <ric...@gmail.com>

Daniels Lee™

unread,
May 6, 2010, 12:38:48 PM5/6/10
to google-map...@googlegroups.com
Thanks for the example links.

It sounds like map styling is the ultimate use-case here.  Accessing tile layers simply provides a means to achieve this by setting its background color.

What do you think map styling capabilities as a feature request?
--
Daniels Lee
Developer Programs Engineer
Google, Inc.
345 Spear Street
San Francisco, CA 94105
650 253 0967

William

unread,
May 7, 2010, 2:44:35 AM5/7/10
to Google Maps JavaScript API v3
On May 7, 12:01 am, "ricco *" <ric...@gmail.com> wrote:
> In your example, the tiles seems to be transparent, so that we can see the
> blue color you have set as background-color, but it seems that is no more
> possible with the V3 because if you set the background color, you won't be
> able to see it as it can be seen in your example...
>

this thread showed a way to access the tiles in V3:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/dd9fae4669c2c593

It's a bit of a hack but these tiles can be overlaid with Census data
from the Take 10 Map:
http://2010.census.gov/2010census/take10map/

Instead of a background color, I've used the normal Google base map
(to provide the oceans and neighboring countries), then added an
overlay of the Census data, and then the transparent hybrid tiles on
top of that, so it's three layers:
http://www.william-map.com/20100507/1/census.htm

ricco *

unread,
May 7, 2010, 3:33:18 AM5/7/10
to google-map...@googlegroups.com
Hello Daniel,

Sure that map styling capabilities would be a great feature in Google map.

I think this kind of needs will become more and more important as there is more and more people that are using the API. It's really a pleasure to see a google map with another style than the defaults.

I'm also thinking about CloudMade capabilities....

However, I think i have a response with the link that William give in the above response : http://koti.mbnet.fi/ojalesa/v3/osm_dual.htm.

Maybe the API could integrate some capabilities to do this kind of styling quickly .

Cheers

2010/5/6 Daniels Lee™ <dani...@google.com>

ricco *

unread,
May 7, 2010, 3:39:50 AM5/7/10
to google-map...@googlegroups.com
Hello William,

Your links are really great, exactly what i was looking for, thanks a lot, i going to play with these tricks :)

riccco

2010/5/7 William <willia...@gmail.com>

neavilag

unread,
May 7, 2010, 10:36:12 PM5/7/10
to Google Maps JavaScript API v3
Hi William what you did with the Radar data is more or less what I
want to do with this rainfall data flood potential areas in Central
America, right now is an image overlay, how can i make it to put the
google maps street, borders etc over the image ? My image is fixed, no
tiles.. and comes from a satellite estimated rainfall. generated every
hour.

see the link image
http://screencast.com/t/OTRhMGNjYTIt

Used the same USGS overlay sample..

thanks and regards


On May 7, 12:44 am, William <william.g...@gmail.com> wrote:
> On May 7, 12:01 am, "ricco *" <ric...@gmail.com> wrote:
>
> > In your example, the tiles seems to be transparent, so that we can see the
> > blue color you have set as background-color, but it seems that is no more
> > possible with the V3 because if you set the background color, you won't be
> > able to see it as it can be seen in your example...
>
> this thread showed a way to access the tiles in V3:http://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

William

unread,
May 8, 2010, 4:46:54 AM5/8/10
to Google Maps JavaScript API v3
On May 8, 12:36 pm, neavilag <neavi...@gmail.com> wrote:
> Hi William what you did with the Radar data is more or less what I
> want to do with this rainfall data flood potential areas in Central
> America, right now is an image overlay, how can i make it to put the
> google maps street, borders etc over the image ? My image is fixed, no
> tiles.. and comes from a satellite estimated rainfall. generated every
> hour.

Hi Norman, I used the new V3 GroundOverlay to make a rainfall map
using data from
http://trmm.gsfc.nasa.gov/affinity/download_kmz.html

But there is no easy way to make the Hybrid Label Tiles over the
image. I have hacked it so it works by changing the zIndex of the map
pane:

http://www.william-map.com/20100508/2/rain.htm

neavilag

unread,
May 8, 2010, 10:35:55 AM5/8/10
to Google Maps JavaScript API v3
William, this is great, actually your example worked as I wanted check
the link, I am testing on Localhost so cannot see it live.

http://screencast.com/t/MDIyNDYzN

Btw, seems we are working with similar data, our CAFFG data is a new
approach for TRMM in Central America, have you seen it ? We will use
this information a lot since we are starting rainy season here..

http://www.hrc-lab.org/right_nav_widgets/realtime_caffg/index.php


Thanks for all..

:-)


On May 8, 2:46 am, William <william.g...@gmail.com> wrote:
> On May 8, 12:36 pm, neavilag <neavi...@gmail.com> wrote:
>
> > Hi William what you did with the Radar data is more or less what I
> > want to do with this rainfall data flood potential areas in Central
> > America, right now is an image overlay, how can i make it to put the
> > google maps street, borders etc over the image ? My image is fixed, no
> > tiles.. and comes from a satellite estimated rainfall. generated every
> > hour.
>
> Hi Norman, I used the new V3 GroundOverlay to make a rainfall map
> using data fromhttp://trmm.gsfc.nasa.gov/affinity/download_kmz.html

William

unread,
May 9, 2010, 5:58:42 AM5/9/10
to Google Maps JavaScript API v3
On May 9, 12:35 am, neavilag <neavi...@gmail.com> wrote:
> William, this is great, actually your example worked as I wanted check
> the link, I am testing on Localhost so cannot see it live.
>
> http://screencast.com/t/MDIyNDYzN
>
> Btw, seems we are working with similar data, our CAFFG data is a new
> approach for TRMM in Central America, have you seen it ? We will use
> this information a lot since we are starting rainy season here..
>
> http://www.hrc-lab.org/right_nav_widgets/realtime_caffg/index.php
>

I tried this CAFFG data and it looks good when you trim the image
exactly to size. Also I made a control to toggle the Hybrid Label
display, see this map:

http://www.william-map.com/20100508/2/caffg.htm

@neavilag (Norman)

unread,
May 10, 2010, 7:45:32 AM5/10/10
to Google Maps JavaScript API v3
Thanks William, fits really good, to use realtime data will have to
keep it with all the image... what tool you used to get the bounds ?

regards

Norman

Esa

unread,
May 10, 2010, 7:03:35 PM5/10/10
to Google Maps JavaScript API v3

William

unread,
May 10, 2010, 9:54:34 PM5/10/10
to Google Maps JavaScript API v3
On May 10, 9:45 pm, "@neavilag (Norman)" <neavi...@gmail.com> wrote:
> Thanks William, fits really good, to use realtime data will have to
> keep it with all the image... what tool you used to get the bounds ?
>
the image had graticule lines on it, so I just used photoshop to clip
it to (5,-95) (20,-75)

Daniels Lee™

unread,
May 28, 2010, 7:25:51 PM5/28/10
to google-map...@googlegroups.com
FYI, if you haven't heard yet, we launched map styling as an exciting new feature last week at Google I/O.  This would resolve the features requested here.

Check them out if you haven't already :)

Examples:

Wizard:


rccc

unread,
May 29, 2010, 8:16:26 AM5/29/10
to Google Maps JavaScript API v3
Hello Daniels;

thanks for information, i have already post here about this nwe
feaures :
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ce50545dbbf2c3d6/c0cbf361818220c2?lnk=gst&q=styled+map#c0cbf361818220c2.

Thanks a lot :)


On May 29, 1:25 am, Daniels Lee™ <daniel...@google.com> wrote:
> FYI, if you haven't heard yet, we launched map styling as an exciting new
> feature last week at Google I/O.  This would resolve the features requested
> here.
>
> Check them out if you haven't already :)
>
> Examples:http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/examplest...
>
> <http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/examplest...>
> Wizard:http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/in...
>
>
>
> On Mon, May 10, 2010 at 6:54 PM, William <william.g...@gmail.com> wrote:
> > On May 10, 9:45 pm, "@neavilag (Norman)" <neavi...@gmail.com> wrote:
> > > Thanks William, fits really good, to use realtime data will have to
> > > keep it with all the image... what tool you used to get the bounds ?
>
> > the image had graticule lines on it, so I just used photoshop to clip
> > it to (5,-95) (20,-75)
>
> > ...
>
> > --
> > 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>
> > .
Reply all
Reply to author
Forward
0 new messages