HI
having real trouble with what i thought would be a simple task. I wish
to click on a marker and display a tabbed info window with two tabs.
One for address and one for streetview. i have achieved this from
clicking on the actual map using latlng, but cant for the life of me
do it for a marker that uses an xml file tp plot markers.
M code is below. Hope someone can help
Thanks
Lee
<script type="text/javascript">
var iconBlue = new GIcon();
iconBlue.image = 'bluecirclemarker.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(16, 16);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'greencirclemarker.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(16, 16);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
var markerGroups = { "restaurant": [], "bar": []};
var map;
var marker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
var panoClient = new GStreetviewClient();
map.setCenter(new GLatLng(47.614495, -122.341861), 13);
map.setUIToDefault();
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.enableScrollWheelZoom();
document.getElementById("restaurantCheckbox").checked = true;
document.getElementById("barCheckbox").checked = true;
document.getElementById("labelsCheckbox").checked = true;
GDownloadUrl("markerdata.xml", function(data) {
var xml = GXml.parse(data);
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var label = markers[i].getAttribute("label");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new
GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, label, address,
type);
map.addOverlay(marker);
}
});
//]]>
}
function createMarker(point, name, label, address, type) {
var marker = new LabeledMarker(point, {icon: customIcons[type],
labelText: label, labelOffset: new GSize(-6, -10)});
markerGroups[type].push(marker);
var html = "<div class='heading'>" + name + "</div><div
class='address'>" + address +"</div>";
// var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// ******** creates tabbed infowindow with streetview from clicking
map *******
GEvent.addListener(map, 'click', function(ov, latlng, ovll) {
if (latlng) {
var regular = '<div>LatLng:' + latlng + '</div><a
href="javascript:void(0)"
onclick="javascript:map.getInfoWindow().maximize()">more info.. </a>';
var summary = '<div id="sum">Address of' + latlng + '</
div><a href="javascript:void(0)"
onclick="javascript:map.getInfoWindow().restore()">less info.. </a>';
var panoDiv = document.createElement('div');
panoDiv.style.width = "400px"; // can be anything,
will be auto resized
panoDiv.style.width = "200px";
var tabs = [new MaxContentTab('address', '<div
id="address"></div>'), new MaxContentTab('streetview', panoDiv)];
map.openMaxContentTabsHtml(latlng, regular, summary,
tabs, {
maxTitle: "More Info",
selectedTab: 'streetview',// or use index 1,
style: {
tabOff: {
backgroundColor: '#CCCCFF'
}
},maximized:
document.getElementById('maximized').checked
});
}
});
GEvent.addListener(map.getTabbedMaxContent(), 'selecttab',
function(tab) {
var node = tab.getContentNode();
var latlng = map.getInfoWindow().getPoint();
switch (tab.getLabel()) {
case 'address':
// do a quick check to avoid repeat call
if (document.getElementById('address').innerHTML
== '') {
// reverse geocode
geocoder.getLocations(latlng, function(response)
{
if (!response) {
alert('server error');
} else if (response.Status.code != 200) {
alert("Status Code:" +
response.Status.code);
} else {
var place = response.Placemark[0];
document.getElementById('sum').innerHTML =
'Address of the clicked point: <b>' + place.address + '</b>';
document.getElementById('address').innerHTML
= '<b>orig latlng:</b>' + response.name + '<br/>' +
'<b>latlng:</b>' +
place.Point.coordinates[0] +
"," +
place.Point.coordinates[1] +
'<br>' +
'<b>Status Code:</b>' +
response.Status.code +
'<br>' +
'<b>Status Request:</b>' +
response.Status.request +
'<br>' +
'<b>Address:</b>' +
place.address +
'<br>' +
'<b>Accuracy:</b>' +
place.AddressDetails.Accuracy +
'<br>' +
'<b>Country code:</b> ' +
place.AddressDetails.Country.CountryNameCode;
}
});
}
break;
case 'streetview':
if (!node.pano) {
var pano = new GStreetviewPanorama(node);
GEvent.addListener(pano, 'error',
function(errorCode) {
if (errorCode == 603) {
node.innerHTML = 'StreetView requires flash
plugin. Click <a href="http://get.adobe.com/flashplayer/";
target="_blank"> here</a> to download';
}
});
pano.setLocationAndPOV(latlng);
node.pano = pano;
}
break;
}
});
}
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
