谷歌地圖的動態數據.change

Question

我有一個簡單的選擇形式，使用戶可以選擇類別地圖這樣上顯示：

<select name="kat" id="kat"> 
<option value="0" selected>CATEGORY</option> 
<option value="1" selected>Foo</option> 
<option value="2" selected>Bar</option> 
</select> 

<div id="map"></div> 

而且JS：

function load() { 
$("#kat").change(function() { 
var kat = $("#kat").val(); 

    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(56.311967, 15.023375), 
    zoom: 9, 
    mapTypeId: 'roadmap' 
    }); 

    var infoWindow = new google.maps.InfoWindow; 
    var hoverWindow = new google.maps.InfoWindow; 
    var marker; 

    downloadUrl("data.php?kat="+kat+"", function(data) { 
    var overlays = []; 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var id = markers[i].getAttribute("id"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<h3>" + name + "</h3>" + address; 
     var infohtml = "<b>" + name + "</b>"; 
     var marker = new google.maps.Marker({ 
     map: map, 
     animation: google.maps.Animation.DROP, 
     position: point 
     }); 
     bindHoverWindow(marker, map, hoverWindow, infohtml, infoWindow); 
     bindInfoWindow(marker, map, infoWindow, html, hoverWindow); 
    } 
    }); 
    }); 
} 

這是工作非常好。但我的問題是：

我如何加載地圖data.php吉= 0

在頁面加載時的第一次？ ？（不.change功能

Answer 1

function load() { 
    // Make a reusable function to feed differing categories to the map. 
    function loadMap(category) { 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(56.311967, 15.023375), 
      zoom: 9, 
      mapTypeId: 'roadmap' 
     }); 

     var infoWindow = new google.maps.InfoWindow(); 
     var hoverWindow = new google.maps.InfoWindow(); 
     var marker; 

     downloadUrl("data.php?kat=" + category + "", function (data) { 
      var overlays = []; 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("name"); 
       var id = markers[i].getAttribute("id"); 
       var address = markers[i].getAttribute("address"); 
       var type = markers[i].getAttribute("type"); 
       var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
       var html = "<h3>" + name + "</h3>" + address; 
       var infohtml = "<b>" + name + "</b>"; 
       var marker = new google.maps.Marker({ 
        map: map, 
        animation: google.maps.Animation.DROP, 
        position: point 
       }); 
       bindHoverWindow(marker, map, hoverWindow, infohtml, infoWindow); 
       bindInfoWindow(marker, map, infoWindow, html, hoverWindow); 
      } 
     }); 
    } 

    // Add the `change` listener 
    $("#kat").change(function() { 
     var kat = $("#kat").val(); 
     //Reload the map with new category on `change` 
     loadMap(kat); 
    }); 

    // Load map initially with category `0` 
    loadMap(0); 
}