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:
> 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:
// 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;
> // 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;
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.
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.
>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.
I've thrown together a layer control checkbox. It's not quite as fancy as the one on maps.google.com.
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.
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...
>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.
I tried that at one stage, but for this particular control you might want to change more than one setting at a time, and it feels easier to do that with a plain simple timeout.