...

View Full Version : Javascript/API help - Driving Directions with Clusterer



Troubadourbluue
06-20-2008, 05:18 PM
Hello all!

I'm trying to get my driving directions to show up in my info windows using google API...

Now, I am aware of the current way to add them, and can make them work just fine -




// 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,icontype) {
// === create a marker with the requested icon ===
var marker = new GMarker(point, gicons[icontype]);


// The info window version with the "to here" form open
to_htmls[i] = html + '<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>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>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';


GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);


However, I am actually using a clusterer inside the javascript code, and this coding isn't working.

My current code is as follows:



</head>
<body onunload="GUnload()">


<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 800px; height: 600px"></div>
<center><div id="message"><h3>Please wait while data loads</h3></div></center>
</td>



</td>
</tr>
</table>
<input type="button" value="A" onclick='readMap("test.xml")'>
<input type="button" value="B" onclick='readMap("example.xml")'>
<input type="button" value="C" onclick='readMap("map11c.xml")'><br>





<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;

var Icon = new GIcon();
Icon.image = "icon_beer.gif";
Icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
Icon.iconSize = new GSize(20, 34);
Icon.shadowSize = new GSize(37, 34);
Icon.iconAnchor = new GPoint(9, 34);
Icon.infoWindowAnchor = new GPoint(9, 2);
Icon.infoShadowAnchor = new GPoint(18, 25);

var clusterIcon = new GIcon();
clusterIcon.image = 'icon_beer.gif';
clusterIcon.shadow = 'shadow_large.png';
clusterIcon.iconSize = new GSize( 30, 51 );
clusterIcon.shadowSize = new GSize( 56, 51 );
clusterIcon.iconAnchor = new GPoint( 13, 34 );
clusterIcon.infoWindowAnchor = new GPoint( 13, 3 );
clusterIcon.infoShadowAnchor = new GPoint( 27, 37 );


// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point,Icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);




});



// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}



// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(31.844024,-99.418373), 6);


// create the clusterer
var clusterer = new Clusterer(map);

// set the clusterer parameters if you dont like the defaults
clusterer.icon = clusterIcon;
clusterer.maxVisibleMarkers = 200;
clusterer.gridSize = 5;
clusterer.minMarkersPerClusterer = 5;
clusterer.maxLinesPerInfoBox = 4;


// Read the data
var request = GXmlHttp.create();
request.open("GET", "test.xml", 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 GPoint(lng,lat);
var town = markers[i].getAttribute("html");
var pop = markers[i].getAttribute("pop");
var marker = createMarker(point,town,town+" ");
// create clusterer object
clusterer.AddMarker(marker,town);
}

}
}
request.send(null);
}

else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}


//]]>
</script>
</body>




I have been messing with this thing for about 3 days now, and cannot get the driving directions to populate inside the info window. Any help would be greatly appreciated!

Thanks for your time!

Mike



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum