I'm working on incorporating streetviews in this map:
http://commonbond2.pegasus.webaloo.com/findhousing/all_maps9.asp
It is based on Mike Williams's code (the Econym/Blackpool Church guy),
and uses an xml file to provide the data for the markers.
Clicking on the markers generates a pop-up window, which contains a
link to information about each property, to-from input boxes, and a
streetview. The streetview is not located in the window, but down
below the map.
Here's the problem. The markers work great, but I've also got a
clickable sidebar with links. The links will open the html pop-up
windows, but they will not open the streetview. They appear to be
bypassing the overlay completely.
I've tried a number of things to get the sidebars to pick up the
overlay, but I just can't seem to get it done. Does anyone have either
suggestions or examples they could point me to?
Here's the code. Warning - I am not a scripter...
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be
placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the
side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
// arrays to hold variants of the info window html with get
direction forms open
var to_htmls = [];
var from_htmls = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html,id) {
var marker = new GMarker(point);
var i = gmarkers.length;
var myPano;
var NO_NEARBY_PANO = 600;
myPano = function initialize () {
var theAlamo = new
GLatLng(point.lat(),point.lng());
panoramaOptions = { latlng:theAlamo };
myPano = new
GStreetviewPanorama(document.getElementById("pano"),
panoramaOptions);
GEvent.addListener(myPano, "error",
handlePanoError);
document.getElementById("pano").innerHTML = "";
}
function handlePanoError(errorCode) {
if (errorCode == NO_NEARBY_PANO ) {
document.getElementById("pano").innerHTML = "Street View
is not available for this property";
return;
}
}
// This function picks up the click and opens the corresponding
info window
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
var goview = initialize();
}
);
// The info window version with the "to here" form open
to_htmls[i] = html + '<br><a href="http://www.commonbond.org/
linkproperty.aspx?ID='+id+'" target="_blank"/>Click here to view
details about this property</a>' +
'<br>Directions: <b>To here<\/b> - <a
href="javascript:fromhere(' +
i + ')">From here<\/a>' +
'<br>Start address:<form action="http://maps.google.com/
maps" method="get" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr"
id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="daddr" value="' + point.lat() +
',' + point.lng() +
// "(" + name + ")" +
'"/>';
// The info window version with the "to here" form open
from_htmls[i] = html + '<br><a href="http://www.commonbond.org/
linkproperty.aspx?ID='+id+'" target="_blank"/>Click here to view
details about this property</a>' +
'<br>Directions: <a href="javascript:tohere(' + i +
')">To here<\/
a> - <b>From here<\/b>' +
'<br>End address:<form action="http://maps.google.com/maps";
method="get"" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr"
id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="saddr" value="' + point.lat() +
',' + point.lng() +
// "(" + name + ")" +
'"/>';
// The inactive version of the direction info
html = html + '<br><a href="http://www.commonbond.org/
linkproperty.aspx?ID='+id+'" target="_blank"/>Click here to view
details about this property</a>' +
'<br>Directions: <a href="javascript:tohere('+i+')">To
here<\/a> -
<a href="javascript:fromhere('+i+')">From here<\/a>';
// save the info we need to use later for the side_bar
gmarkers.push(marker);
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' +
(gmarkers.length-1) + ')">' + name + '</a><br>';
return marker;
}
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// functions that open the directions forms
function tohere(i) {
gmarkers[i].openInfoWindowHtml(to_htmls[i]);
}
function fromhere(i) {
gmarkers[i].openInfoWindowHtml(from_htmls[i]);
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(42.926432,-93.067781), 6);
// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "example.asp", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName
("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var id = markers[i].getAttribute("id");
// create the marker
var marker = createMarker(point,label,html,id);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the
side_bar div
document.getElementById("side_bar").innerHTML =
side_bar_html;
}
}
request.send(null);
}
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</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
-~----------~----~----~----~------~----~------~--~---
