I am making a map with a lot of markers on it, 75 so far. I have used the "map_functions.js" script from the store locator training and modified it a little (got lucky in making the to and from directions buttons) to try to fit what I am doing.
What is working: Across the top is a list of the cities my markers are in. Along the right side is a list of all the markers. Click on a city above and the side bar markers are just for that city and the markers on the map are just the ones in the side bar (awesome!!) What I would like to do is resize the map to zoom in on all the markers that are shown in the right side bar. So if I was to click on Dallas, only the Dallas markers would show (which they do) and the map would zoom in showing the Dallas Markers. The site is at http://www.texaslacrosse.com/maps/ This is what I am using: *** Start Code *** var map; var centerlat = 31.552373; var centerlong = -97.119097; var startZoom = 7; var deselectCurrent = function() {}; /* I guess the above would not be needed if the maps zooms to the markers */ /* [listing 6-20] */ function initializePoint(pointData) { var point = new GLatLng(pointData.lat, pointData.long); var marker = new GMarker(point); var listItem = document.createElement('li'); var listItemLink = listItem.appendChild(document.createElement('a')); var visible = false; listItemLink.href = "#"; listItemLink.innerHTML = '<strong>' + pointData.owner + ', ' + pointData.address + ' </strong><span>' + pointData.city + ', ' + pointData.state + ' ' + pointData.height + '</span>'; var focusPoint = function() { deselectCurrent(); listItem.className = 'current'; deselectCurrent = function() { listItem.className = ''; } marker.openInfoWindowHtml('<font size="2">' + pointData.owner + '<br> ' + pointData.address + ' <br>' + pointData.city + ', ' + pointData.state + ' ' + pointData.height + '<br>Directions <a href="http://maps.google.com/maps?daddr=' + pointData.lat + pointData.long + '" target="_blank">to here</a> - <a href="http:// maps.google.com/maps?saddr=' + pointData.lat + pointData.long + '" target="_blank">from here</a> </font>'); map.panTo(point); map.setZoom(14) return false; } GEvent.addListener(marker, 'click', focusPoint); listItemLink.onclick = focusPoint; pointData.show = function() { if (!visible) { document.getElementById('sidebar-list').appendChild(listItem); map.addOverlay(marker); visible = true; } } pointData.hide = function() { if (visible) { document.getElementById('sidebar-list').removeChild(listItem); map.removeOverlay(marker); visible = false; } } pointData.show(); } /* [listing 6-20 end] */ /* [listing 6-22] */ function initializeSortTab(type) { var listItem = document.createElement('li'); var listItemLink = listItem.appendChild(document.createElement('a')); listItemLink.href = "#"; listItemLink.innerHTML = type; listItemLink.onclick = function() { changeBodyClass('standby', 'loading'); for(id in markers) { if (markers[id].type == type || 'All' == type) markers[id].show(); else markers[id].hide(); } changeBodyClass('loading', 'standby'); return false; } document.getElementById('filters').appendChild(listItem); } /* [listing 6-22 end] */ function windowHeight() { // Standard browsers (Mozilla, Safari, etc.) if (self.innerHeight) return self.innerHeight; // IE 6 if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight; // IE 5 if (document.body) return document.body.clientHeight; // Just in case. return 0; } function handleResize() { var height = windowHeight() - document.getElementById ('toolbar').offsetHeight - 30; document.getElementById('map').style.height = height + 'px'; document.getElementById('sidebar').style.height = height + 'px'; } function changeBodyClass(from, to) { document.body.className = document.body.className.replace(from, to); return false; } function init() { var type; var allTypes = { 'All':[] }; document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); }; document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); }; handleResize(); map = new GMap(document.getElementById("map")); map.addControl(new GMapTypeControl()); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(centerlat, centerlong), startZoom); /* [listing 6-21] */ for(id in markers) { initializePoint(markers[id]); allTypes[markers[id].type] = true; } for(type in allTypes) { initializeSortTab(type); } /* [listing 6-21 end] */ changeBodyClass('loading', 'standby'); } window.onresize = handleResize; window.onload = init; *** END CODE *** --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
