지도 센터 변경 googlemap api

Question

지도 센터를 변경하고 싶습니다. 내 코드는 아래 있습니다.

var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
     } 
    }; 

    function load() { 
     var point2=[]; 

     // mark infowindow 
     downloadUrl("markinfoan.xml", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("time"); 
      var ss = markers[i].getAttribute("secspray"); 
      var pd = markers[i].getAttribute("secdis"); 
      var ms = markers[i].getAttribute("meanspray"); 
      var td = markers[i].getAttribute("totaldis"); 
      var tss = markers[i].getAttribute("totalsecspray"); 
      var tst = markers[i].getAttribute("totalsectime"); 
      var mpoint = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("latitude")), 
       parseFloat(markers[i].getAttribute("longitude"))); 
      var html = "<b>" + "Time:"+ "</b>"+name +"<br/>" + "<b>" +"Spray:"+"</b>"+ss+"<br/>"+ "<b>" +"MeanSpray:"+"</b>"+ms+"<br/>"+ "<b>" +"TotalsectionSpray:"+"</b>"+tss+"<br/>"+ "<b>" +"Dis:"+"</b>"+pd+"<br/>"+ "<b>" +"Total dis:"+"</b>"+td+"<br/>"+ "<b>" +"Totaltime:"+"</b>"+tst+"<br/>"; 
      var icon = customIcons[pd] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: mpoint, 
      icon: icon.icon 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 
//total route 
     downloadUrl("rec_an.xml", function(data) { 
      var point1 = []; 
      var xml1 = data.responseXML; 
      var markers1 = xml1.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers1.length; i++) { 
      point1[i] = new google.maps.LatLng(
       parseFloat(markers1[i].getAttribute("latitude")), 
       parseFloat(markers1[i].getAttribute("longitude"))); 
      } 
      var flightPath = new google.maps.Polyline({ 
      path: point1, 
      geodesic: true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 2.0, 
      strokeWeight: 4 
      }); 
      flightPath.setMap(map); 
     }); 
     // mark infowindow route 
     downloadUrl("markinfoan.xml", function(data) { 
//   var point2 = []; 
      var xml2 = data.responseXML; 
      var markers2 = xml2.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers2.length; i++) { 
      point2[i] = new google.maps.LatLng(
       parseFloat(markers2[i].getAttribute("latitude")), 
       parseFloat(markers2[i].getAttribute("longitude"))); 
      } 
      var flightPath = new google.maps.Polyline({ 
      path: point2, 
      geodesic: true, 
      strokeColor: '#0066FF', 
      strokeOpacity: 2.0, 
      strokeWeight: 4 
      }); 
      flightPath.setMap(map); 
     });   
    alert(point2); 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(point2[0]), 
     zoom: 12, 
     mapTypeId: 'roadmap' 
     }); 
    var infoWindow = new google.maps.InfoWindow; 

    } 
    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
      if (request.status === 200) { 
       alert("Total route, Infowindow"); 
       alert(point2[0]); 
      } else { 
       alert('There was a problem with the request.'); 
      } 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 

    //]]> 

    </script> 

    </head> 

    <body onload="load()"> 
    <div id="map" style="width: 1000px; height: 800px"></div> 

지도 중심을 (37.5,126.9)에서 point2 [0]으로 변경하고 싶습니다.

point2 [0]은 xml 파일에 기록 된 위치입니다.

코드를 실행할 때 "alert (point2)"는 아무 것도 나타내지 않습니다. 어떻게 해결할 수 있습니까?

감사합니다.

Answer 1

downloadUrl은 비동기 요청이므로 콜백 함수에 값이있을 때 point2 값을 사용해야합니다.

downloadUrl("markinfoan.xml", function(data) { 
     var xml2 = data.responseXML; 
     var markers2 = xml2.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers2.length; i++) { 
     point2[i] = new google.maps.LatLng(
      parseFloat(markers2[i].getAttribute("latitude")), 
      parseFloat(markers2[i].getAttribute("longitude"))); 
     } 
     var flightPath = new google.maps.Polyline({ 
     path: point2, 
     geodesic: true, 
     strokeColor: '#0066FF', 
     strokeOpacity: 2.0, 
     strokeWeight: 4 
     }); 
     flightPath.setMap(map); 

     // set the map center inside the callback function, where point2 exists 
     map.setCenter(point2[point2.length-1]); // <-- add this sets the center of the map to the last point on the path 
    });