ugrás a tartalomhoz

Google Maps adaptív zoom

pilot · 2012. Nov. 12. (H), 13.29
Sziasztok!

SQL -ből beolvasott koordináták alapján jelenítek meg a Google Maps-on pontokat. Hogyan lehetne azt megoldani, hogy a térkép mindig akkora nagyítású legyen, hogy azon látható legyen az összes pont. A db-ben folyamatosan változnak a koordináták, így a fix zoom megadása nem jó. Itt a kód, amit a neten találtam és jelenleg használok, viszont ez fix nagyítással dolgozik.
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>  
  2. <script type="text/javascript">  
  3.   
  4. var customIcons = {  
  5.   restaurant: {  
  6.     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',  
  7.     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'  
  8.   },  
  9.   bar: {  
  10.     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',  
  11.     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'  
  12.   }  
  13. };  
  14.   
  15. function load() {  
  16.   var map = new google.maps.Map(document.getElementById("map"), {  
  17.     center: new google.maps.LatLng(47.6145, -122.3418),  
  18.     zoom: 5,  
  19.     mapTypeId: 'roadmap'  
  20.   });  
  21.   
  22.   var infoWindow = new google.maps.InfoWindow;  
  23.   
  24.   // Change this depending on the name of your PHP file  
  25.   downloadUrl("phpsqlajax_genxml2.php"function(data) {  
  26.     var xml = data.responseXML;  
  27.     var markers = xml.documentElement.getElementsByTagName("marker");  
  28.     for (var i = 0; i < markers.length; i++) {  
  29.       var name = markers[i].getAttribute("name");  
  30.       var address = markers[i].getAttribute("address");  
  31.       var type = markers[i].getAttribute("type");  
  32.       var point = new google.maps.LatLng(  
  33.           parseFloat(markers[i].getAttribute("lat")),  
  34.           parseFloat(markers[i].getAttribute("lng")));  
  35.       var html = "<b>" + name + "</b> <br/>" + address;  
  36.       var icon = customIcons[type] || {};  
  37.       var marker = new google.maps.Marker({  
  38.         map: map,  
  39.         position: point,  
  40.         icon: icon.icon,  
  41.         shadow: icon.shadow  
  42.       });  
  43.       bindInfoWindow(marker, map, infoWindow, html);  
  44.     }  
  45.   });  
  46. }  
  47.   
  48. function bindInfoWindow(marker, map, infoWindow, html) {  
  49.   google.maps.event.addListener(marker, 'click'function() {  
  50.     infoWindow.setContent(html);  
  51.     infoWindow.open(map, marker);  
  52.   });  
  53. }  
  54.   
  55. function downloadUrl(url, callback) {  /*To load the XML file into the page,*/  
  56.   var request = window.ActiveXObject ?  
  57.       new ActiveXObject('Microsoft.XMLHTTP') :  
  58.       new XMLHttpRequest;  
  59.   
  60.   request.onreadystatechange = function() {  
  61.     if (request.readyState == 4) {  
  62.       request.onreadystatechange = doNothing;  
  63.       callback(request, request.status);  
  64.     }  
  65.   };  
  66.   
  67.   request.open('GET', url, true);  
  68.   request.send(null);  
  69. }  
  70.   
  71. function doNothing() {}  
  72.   
  73. //]]>  
  74.   
  75. t;/script>  
 
1

Ha olvastad a Google Maps API

Poetro · 2012. Nov. 12. (H), 14.04
Ha olvastad a Google Maps API dokumentációját akkor láthattad, hogy van egy fitBounds metódusa a Map objektumnak. Ennek meg kell adni egy LatLngBounds objektumot, amihez pedig hozzá kell adni a koordinátákat a extend metódussal.