Hey developers-

The Panoramio/Wikipedia layers that were available on Google Maps (via
the "More.." dropdown) are now available in the API in the latest
version. Read this blog post for more info:

http://googlegeodevelopers.blogspot.com/2008/10/2-lines-of-code-make-...

Enjoy, and post here with questions (or example uses).

- pamela

Thank you very much Pamela & GM API Team!

On 2 Okt., 00:13, "pamela (Google Employee)" <pamela....@gmail.com>
wrote:

Thank you! I have successfully added Panoramio and Wikipedia layers to
my forum member map at:
http://millennium-thisiswhoweare.net/tiwwa/tiwwa_member_map.php

However, as the layers are enabled by default, the map looks too
crowded as its zoomed out all the way when first viewed.

Looking at the public Google Maps page, there is a More button that
allows visitors to select these layers which is much more friendly.

To get the layers working, I had to change my map API from v2 to v2.x
but the MORE button doesn't show.

How do we enable this? I have the Map, Satellite and Terrain options
displaying, just need the More button...

Thanks again,
Graham

Here's a section of my code so far:

function load() {

        var myPano = new
GStreetviewPanorama(document.getElementById("pano"));
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GHierarchicalMapTypeControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GScaleControl());
                map.enableGoogleBar();
                map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(41.902277,-48.867187), 2,
G_NORMAL_MAP);
                map.addMapType(G_PHYSICAL_MAP);

                // Add Panoramio and Wikipedia options.

                map.addOverlay(new GLayer("com.panoramio.all"));
        map.addOverlay(new GLayer("org.wikipedia.en"));

                // Add streetmap overlay and show the street when available.

                svOverlay = new GStreetviewOverlay();
                map.addOverlay(svOverlay);
                GEvent.addListener(map,"click", function(overlay,latlng) {
                  myPano.setLocationAndPOV(latlng);
                });

                // Show a pop with coordinates when someone clicks on the map.

                GEvent.addListener(map, 'click', function(overlay, point) {
        var latLngStr = "<div><h5>You clicked on the map! <br />Copy/
paste the following numbers into your profile settings <br />to put a
marker at this exact spot!<br /><br />Lat = " + point.y + "<br />Long
= " + point.x + "<br />Only enter the numbers, don't include any
letters!</h5></div>";
                map.openInfoWindow(point, latLngStr);

        });

        // Download the data in data.xml and load it onto the map.

        GDownloadUrl("http://millennium-thisiswhoweare.net/tiwwa/
membermap_xml/data.xml",function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                                parseFloat(markers[i].getAttribute("lng")));

                var displayname = markers[i].getAttribute("displayname");
        var title = markers[i].getAttribute("title");
        var posts = markers[i].getAttribute("posts");
                var msg = markers[i].getAttribute("msgtotal");
                var views = markers[i].getAttribute("profileviews");
                var topics = markers[i].getAttribute("topics");
                var type = markers[i].getAttribute("type");
                var userid = markers[i].getAttribute("userid");
        var html = "<div><h5>" + displayname + "<br />" + title + "</
h5><div id=\"profile_link\"><a href=\"/tiwwa/index.php?showuser=" +
userid + "\" title=\"View " + displayname + "'s full social profile
page.\">View " + displayname + "'s Profile.</a></div><h5>Total Posts:
" + posts + "<br />Total Topics: " + topics + "<br />Total Stored
PM's: " + msg + "<br />Profile Views: " + views + "<br /><br />Map Lat/
Lng: " + point + "</h5></div>";

                var html= html;

          // create the marker
                var marker = createMarker(point,displayname,type,html);
                map.addOverlay(marker);          }
          // put the assembled sidebar_html contents into the sidebar div
          document.getElementById("sidebar").innerHTML = sidebar_html;

There is no 'More' Button. You have to use GLayer.hide() and
GLayer.show(). Look at the examples (custom controls).

And, please don't post code, post a link to your map.

On 2 Okt., 13:47, The Old Man <GrahamSmit...@googlemail.com> wrote:

Thanks, I consider myself slapped as I misread the "before you post"
topic on posting code but I did post a link!

Did you mean these examples?
http://code.google.com/apis/maps/documentation/reference.html#GLayer

The instructions say to add:

map.addOverlay(new GLayer("com.panoramio.all"));
map.addOverlay(new GLayer("org.wikipedia.en"));

This adds the 2 layers, so for each layer do I add these lines below
to add a custom control:

map.addControl(new GLayer.show("com.panoramio.all"));
map.addControl(new GLayer.hide("com.panoramio.all"));

I tried that and the map wouldn't display anything at all.

Thanks again.

The GLayer is a custom tile layer over the base map and not a
control.

You can make your own controls and call the show/hide from this
control:
http://code.google.com/apis/maps/documentation/controls.html#Custom_C...
You can easily modify this example.

On 2 Okt., 16:34, The Old Man <GrahamSmit...@googlemail.com> wrote:

Thank you, I see what you mean now. I don't understand why there
aren't pre-made buttons like the Terrain control, to make it easier to
add these layers out of the box.

Thanks again.

I've just realised in getting this to work, that to add both Wikipedia
and Panoramio layers to your map, you have to add 4 buttons to your
map which is a bit OTT! Takes up a lot of room and looks ugly.
I wish it were possible to have a drop down tick box to enable.disable
these tiles like on the actual Google Maps website, much neater.

Wasn't it The Old Man who wrote:

I've thrown together a layer control checkbox. It's not quite as fancy
as the one on maps.google.com.

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

I've not written a tut for it yet.

The bit that maps.google.com does, but I can't work out how to do is the
mouseout handling.

I've made my control rectangular, rather than the "tabbed" shape used by
maps.google.com so I don't have to worry about doing mouseovers and
mouseouts of non-rectangular objects, but I still can't get the mouseout
to do what I want.

I get a container mouseout event when the mouse goes over a checkbox, so
if I close the thing on container mouseout, the checkbox goes away just
as you try to click it. What I ended up doing was setting a timeout so
that the control goes away 5 seconds after you open it, which isn't
quite as pretty, but it does the job.

A side effect of having a rectangular container is that things get a bit
ugly if you use longer text for your checkbox labels. You'd need to make
the MoreControl and LayerControl wide enough for your longer text to
make it look nice again.

--
http://econym.org.uk/gmap
The Blackpool Community Church Javascript Team

Mike,

A timeout is the only way I've gotten dropdown menus to work
successfully AND consistently.In addition I clear the timeout in the
onclick handler and remove/hide the control/menu directly.

Pamela (or anyone else)
So this layer stuff in very cool, I only have one problem.. My map is
only 250px high. It is designed to sit on top of a web so I don't want
it to "take over" the page. Is there anyway to override the default
infoWindow with my own (like I do with my markers etc)? I never really
had a need until this..

Any tips or pointers in the right direction would be great...

Thanks

Chris