Hello Andrew OK. I go back to the position I was this morning.
I'm planning to create a Website that offers regional Point of Interests to the user. The Site offers Points of Restaurants and Points of holiday flats. It's all in german language. If you'd visit the website with the url http://www.renchtal.com/ you can logon (on the left side) as user: guest pass guest. Then you'll see two new links in the main menu. Click on Renchtal Karte (That means more or less Renchtal Map) Renchtal is the valley this regional search is about. On the Map you have a sidebar with numbered sidebar entries. This version uses three different kml-sources that are generated from the Content Management System that is used in this case. The Points that are shown in the map are up to 30 entries. If you change the scope on the map the restaurants ( the red markers) disapear whan they are not in the viewport. But the green ones (The holliday flats don't). My thought was then bringing them together into one single kml file. So that viewport rule for the restaurants also applies on the holiday flats. Future Features should be that the user can set its own map center and view and add many different walking tours to the systems. That's the code of the main js: // Declare variables for later use var map; var geoXml; var geoXml2; var geoXml3; var data = new Array(); var markers = new Array(); var data2 = new Array(); var markers2 = new Array(); var data3 = new Array(); var markers3 = new Array(); var clicked; var current; var clicked2; var current2; var clicked3; var current3; var geocoder; var marker; function loadMap() { // loadMap: initialize the API and load the map onto the page // Get the map container div var mapDiv = document.getElementById('map'); // Confirm browser compatibility with the Maps API if (!GBrowserIsCompatible()) mapDiv.innerHTML = 'Sorry, your browser isn\'t compatible with Google Maps.'; else { // Initialize the core map object map = new GMap2(mapDiv, {mapTypes: [G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP]}); // Set the starting map viewport var coordinates = new GLatLng(48.527924, 8.033119); map.setCenter(coordinates, 11); // Add the standard map controls map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); map.addControl(new GMapTypeControl()); // Initialize the KML processor // var url = 'uk_breweries.kml'; var url = 'http://www.renchtal.com/index.php?article_id=514'; var options = {createmarker: addDataPoint, nozoom: true}; geoXml = new EGeoXml(map, url, options); var url2 = 'http://www.renchtal.com/index.php?article_id=577'; var options2 = {createmarker: addDataPoint2, nozoom: true}; geoXml2 = new EGeoXml(map, url2, options2); var url3 = 'http://www.renchtal.com/index.php?article_id=584'; var options3 = {createmarker: addDataPoint3, nozoom: true}; geoXml3 = new EGeoXml(map, url3, options3); // Attach an event handler for after the KML is processed GEvent.addListener(geoXml, 'parsed', xmlParsed); GEvent.addListener(geoXml2, 'parsed', xmlParsed2); GEvent.addListener(geoXml3, 'parsed', xmlParsed3); // Load the KML geoXml.parse(); geoXml2.parse(); geoXml3.parse(); // Attach an event to refresh the marker display whenever the map moves GEvent.addListener(map, 'moveend', mapMoveEnd); GEvent.addListener(map, 'infowindowopen', mapInfoWindowOpen); GEvent.addListener(map, 'infowindowclose', mapInfoWindowClose); GEvent.addListener(map, 'moveend2', mapMoveEnd2); GEvent.addListener(map, 'infowindowopen2', mapInfoWindowOpen2); GEvent.addListener(map, 'infowindowclose2', mapInfoWindowClose2); GEvent.addListener(map, 'moveend3', mapMoveEnd3); GEvent.addListener(map, 'infowindowopen3', mapInfoWindowOpen3); GEvent.addListener(map, 'infowindowclose3', mapInfoWindowClose3); geocoder = new GClientGeocoder(); LoadGPXFileIntoGoogleMap(map, "http://www.renchtal.com/ diplomarbeit/Tour_16979-1.gpx"); } }; function addDataPoint(coordinates, name, description) { // addDataPoint: save the data for a placemark found by the KML processor var d = data.length; data[d] = {coords: coordinates, title: name, details: description}; }; function addDataPoint2(coordinates, name, description) { // addDataPoint: save the data for a placemark found by the KML processor var d2 = data2.length; data2[d2] = {coords2: coordinates, title2: name, details2: description}; }; function addDataPoint3(coordinates, name, description) { // addDataPoint: save the data for a placemark found by the KML processor var d3 = data3.length; data3[d3] = {coords3: coordinates, title3: name, details3: description}; }; function xmlParsed() { // xmlParsed: after KML processing, initialize the marker display mapMoveEnd(); }; function xmlParsed2() { // xmlParsed: after KML processing, initialize the marker display mapMoveEnd2(); }; function xmlParsed3() { // xmlParsed: after KML processing, initialize the marker display mapMoveEnd3(); }; function mapMoveEnd() { // mapMoveEnd: refresh the marker display after the map has moved // Get the map boundary coordinates var mapBounds = map.getBounds(); // Don't refresh if the currently-selected marker is still in view if (current != null) { if (mapBounds.contains(current)) return; else map.closeInfoWindow(); } // Prepare to build new sidebar content by starting with a clean slate var sidebarContent = ''; // Remove previous set of markers from the map and the array for (var m = markers.length - 1; m >= 0; m--) { map.removeOverlay(markers[m]); markers.splice(m, 1); } // Create a base icon var numberIcon = new GIcon(G_DEFAULT_ICON); // Look for data in the new map area for (var d = 0; d < data.length; d++) { if (mapBounds.contains(data[d].coords)) { // Map does contain this data point; create a marker and add it to the map m = markers.length; numberIcon.image = 'http://www.renchtal.com/markers/marker' + (m + 1) + '.png'; markers[m] = new GMarker(data[d].coords, {icon: numberIcon}); markers[m].data = data[d]; map.addOverlay(markers[m]); // Also attach an event handler to show infowindow when marker is clicked GEvent.addListener(markers[m], 'click', new Function('showDetail(' + m + ')')); // Create sidebar content for this data point, including click event handler sidebarContent = sidebarContent + '<li><a href="#" onclick="showDetail(' + m + '); return false"><img style="border:0;width:15px;height:24px;vertical- align:middle;padding-right:5px;" src="http://www.renchtal.com/markers/ marker'+ (m + 1) +'.png" />' + data[d].title + '</a></li>'; if (m >= 29) { // We've reached 20 markers, so break out of the loop sidebarContent = sidebarContent + '<li style="list-style: none">zoom in for more...</li>'; break; } } } if (markers.length == 0) // No data points found in map boundaries sidebarContent = '<li style="list-style: none">No results found in map area. ' + 'Try zooming out or moving the map.</li>'; // Move the new content into the sidebar document.getElementById('list').innerHTML = sidebarContent; }; // Moveend 2 function mapMoveEnd2() { // mapMoveEnd: refresh the marker display after the map has moved // Get the map boundary coordinates var mapBounds2 = map.getBounds(); // Don't refresh if the currently-selected marker is still in view if (current2 != null) { if (mapBounds2.contains(current2)) return; else map.closeInfoWindow2(); } // Prepare to build new sidebar content by starting with a clean slate var sidebarContent = ''; // Remove previous set of markers from the map and the array for (var m2 = markers2.length - 1; m2 >= 0; m2--) { map.removeOverlay(markers2[m2]); markers2.splice(m2, 1); } // Create a base icon var numberIcon2 = new GIcon(G_DEFAULT_ICON); // Look for data in the new map area for (var d2 = 0; d2 < data2.length; d2++) { if (mapBounds2.contains(data2[d2].coords2)) { // Map does contain this data point; create a marker and add it to the map m2 = markers2.length; numberIcon2.image = 'http://www.renchtal.com/markers2/marker' + (m2 + 1) + '.png'; markers2[m2] = new GMarker(data2[d2].coords2, {icon: numberIcon2}); markers2[m2].data2 = data2[d2]; map.addOverlay(markers2[m2]); // Also attach an event handler to show infowindow when marker is clicked GEvent.addListener(markers2[m2], 'click', new Function('showDetail2(' + m2 + ')')); // Create sidebar content for this data point, including click event handler sidebarContent = sidebarContent + '<li><a href="#" onclick="showDetail2(' + m2 + '); return false"><img style="width:15px;border:0;height:24px;vertical- align:middle;padding-right:5px;" src="http://www.renchtal.com/markers2/ marker'+ (m2 + 1) +'.png" />' + data2[d2].title2 + '</a></li>'; if (m2 >= 29) { // We've reached 20 markers, so break out of the loop sidebarContent = sidebarContent + '<li style="list-style: none">zoom in for more...</li>'; break; } } } if (markers2.length == 0){ // No data points found in map boundaries sidebarContent = '<li style="list-style: none">No results found in map area. ' + 'Try zooming out or moving the map.</li>'; } // Move the new content into the sidebar document.getElementById('list2').innerHTML = sidebarContent; }; function mapMoveEnd3() { // mapMoveEnd: refresh the marker display after the map has moved // Get the map boundary coordinates var mapBounds3 = map.getBounds(); // Don't refresh if the currently-selected marker is still in view if (current3 != null) { if (mapBounds3.contains(current3)) return; else map.closeInfoWindow3(); } // Prepare to build new sidebar content by starting with a clean slate var sidebarContent = ''; // Remove previous set of markers from the map and the array for (var m3 = markers3.length - 1; m3 >= 0; m3--) { map.removeOverlay(markers3[m3]); markers3.splice(m3, 1); } // Create a base icon var numberIcon3 = new GIcon(G_DEFAULT_ICON); // Look for data in the new map area for (var d3 = 0; d3 < data3.length; d3++) { if (mapBounds3.contains(data3[d3].coords3)) { // Map does contain this data point; create a marker and add it to the map m3 = markers3.length; numberIcon3.image = 'http://www.renchtal.com/markers3/marker' + (m3 + 1) + '.png'; markers3[m3] = new GMarker(data3[d3].coords3, {icon: numberIcon3}); markers3[m3].data3 = data3[d3]; map.addOverlay(markers3[m3]); // Also attach an event handler to show infowindow when marker is clicked GEvent.addListener(markers3[m3], 'click', new Function('showDetail3(' + m3 + ')')); // Create sidebar content for this data point, including click event handler sidebarContent = sidebarContent + '<li><a href="#" onclick="showDetail3(' + m3 + '); return false"><img style="width:15px;border:0;height:24px;vertical- align:middle;padding-right:5px;" src="http://www.renchtal.com/markers3/ marker' + (m3 + 1) + '.png" />' + data3[d3].title3 + '</a></li>'; if (m3 >= 100) { // We've reached 20 markers, so break out of the loop sidebarContent = sidebarContent + '<li style="list-style: none">zoom in for more...</li>'; break; } } } if (markers3.length == 0){ // No data points found in map boundaries sidebarContent = '<li style="list-style: none">No results found in map area. ' + 'Try zooming out or moving the map.</li>'; } // Move the new content into the sidebar document.getElementById('list3').innerHTML = sidebarContent; }; function showDetail(m) { // showDetail: open the infowindow for the given map marker current = clicked = markers[m].data.coords; markers[m].openInfoWindow( '<h3 style="margin: 0; font-size=120%">' + markers[m].data.title + '</h3>' + '<p style="margin: 0; font-size=90%">' + markers[m].data.details + '</p>'); }; function showDetail2(m2) { // showDetail: open the infowindow for the given map marker current2 = clicked2 = markers2[m2].data2.coords2; markers2[m2].openInfoWindow( '<h3 style="margin: 0; font-size=120%">' + markers2 [m2].data2.title2 + '</h3>' + '<p style="margin: 0; font-size=90%">' + markers2 [m2].data2.details2 + '</p>'); }; function showDetail3(m3) { // showDetail: open the infowindow for the given map marker current3 = clicked3 = markers3[m3].data3.coords3; markers3[m3].openInfoWindow( '<h3 style="margin: 0; font-size=120%">' + markers3 [m3].data3.title3 + '</h3>' + '<p style="margin: 0; font-size=90%">' + markers3 [m3].data3.details3 + '</p>'); }; function mapInfoWindowOpen() { // mapInfoWindowOpen: set the variable that keeps track of the selected coords current = clicked; }; function mapInfoWindowOpen2() { // mapInfoWindowOpen: set the variable that keeps track of the selected coords current2 = clicked2; }; function mapInfoWindowOpen3() { // mapInfoWindowOpen: set the variable that keeps track of the selected coords current3 = clicked3; }; function mapInfoWindowClose() { // mapInfoWindowClose: clear the variable that keeps track of the selected coords current = null; }; function mapInfoWindowClose2() { // mapInfoWindowClose: clear the variable that keeps track of the selected coords current2 = null; }; function mapInfoWindowClose3() { // mapInfoWindowClose: clear the variable that keeps track of the selected coords current3 = null; }; function geocode() { // geocode: Call the Google geocoder with the address supplied by the user var address = document.getElementById('address').value; geocoder.getLatLng(address, afterGeocode); }; function afterGeocode(coordinates) { // afterGeocode: Callback function for the geocoder, showing the coords on the map if (coordinates == null) alert('Address not found. Please try again.'); else { // Address was found if (marker == null) { // This is the first time we've geocoded an address, so create the marker var iconOptions = {width: 24, height: 24, primaryColor: "#fffc1b"}; var myIcon = MapIconMaker.createMarkerIcon(iconOptions); marker = new GMarker(coordinates, {icon: myIcon, draggable: true}); map.addOverlay(marker); GEvent.addListener(marker, 'dragend', markerDragEnd); GEvent.addListener(marker, 'dragstart', markerDragStart); } else { // The marker already exists, just move it to the new coordinates marker.setPoint(coordinates); } map.setCenter(coordinates, 14); marker.openInfoWindowHtml('Drag marker to exact location, then click Save.'); saveCoordinates(); } }; function markerDragStart() { // markerDragStart: Close the infowindow when the marker is being dragged map.closeInfoWindow(); }; function markerDragEnd() { // markerDragEnd: Update the form coordinates and show more instructions saveCoordinates(); var content = '<a href="#" onclick="map.zoomIn(); return false">Zoom in</a>' + ' if needed to place marker<br />exactly, or click Save when done.'; marker.openInfoWindow(content); }; function saveCoordinates() { // saveCoordinates: Copy the current marker coordinates into the form fields var coordinates = marker.getPoint(); document.getElementById('latitude').value = coordinates.lat ().toFixed(6); document.getElementById('longitude').value = coordinates.lng ().toFixed(6); }; function LoadGPXFileIntoGoogleMap(map, filename) { // Remove any existing overlays from the map. //map.clearOverlays(); var request = GXmlHttp.create(); request.open("GET", filename, true); request.onreadystatechange = function() { if (request.readyState == 4) { parser = new GPXParser(request.responseXML, map); parser.SetTrackColour("#ff0000"); // Set the track line colour parser.SetTrackWidth(5); // Set the track line width parser.SetMinTrackPointDelta(0.001); // Set the minimum distance between track points parser.CenterAndZoom(request.responseXML, G_NORMAL_MAP); // Center and Zoom the map over all the points. parser.AddTrackpointsToMap(); // Add the trackpoints parser.AddWaypointsToMap(); // Add the waypoints } } request.send(null); }; On 17 Sep., 16:47, Andrew Leach <[email protected]> wrote: > On Sep 17, 3:31 pm, simonsinus <[email protected]> wrote: > > > > > Generating two different files with data from respectivly different > > origins? > > Well then I need two JS-Functions. > > No you don't. Make two GDownloadUrl() calls and process the result > with a common function: > > function processResult(data) { ... } > GDownloadUrl(myfile1,processResult); > GDownloadUrl(myfile2,processResult); > > You can even use additional parameters if you take advantage of > function closure: > > function processResult(data,type) { ... } > GDownloadUrl(myfile1,function(data){processResult(data,"typeA")}); > GDownloadUrl(myfile2,function(data){processResult(data,"typeB")}); > > This last example may allow you to process real KML without your > "type" attribute included, because you can specify it outside the file > itself. > > There are other methods, including using tailored XML and your own > parser rather than the standard KML. But as you haven't yet given a > link to let us into the secret of what you are actually doing, it's > not easy to say what would be best in your situation. > > Andrew --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
